@flipdish/portal-library 8.0.2 → 8.1.0

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react"),require("@mui/material/Pagination");var t=require("@mui/material/usePagination/usePagination"),a=require("@mui/material/Box"),i=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),r=require("@mui/material/Typography"),s=require("@mui/material/Stack"),o=require("../../../icons/ArrowLeft02/index.cjs.js"),d=require("../../../icons/ArrowRight02/index.cjs.js"),l=require("../../../providers/TranslationProvider.cjs.js"),c=require("@mui/material/styles"),p=require("@mui/material/useMediaQuery"),u=require("@mui/material/styles/useTheme");const g=c.styled("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),x=c.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)}))),m=c.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=c.styled(r)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),y=c.styled(i.Button)((()=>({textDecoration:"none"}))),j=(e,t,a,i)=>i("Showing_start_end_of_total",{start:t*(e-1)+1,end:t*e,total:t*a}),k=({pageCount:i=1,boundaryPageCount:r=1,disabled:c=!1,rowsPerPage:k,page:h,onChange:v,size:f="medium"})=>{const w=p((e=>e.breakpoints.down("tablet"))),{items:C}=t({boundaryCount:r,count:i,disabled:c,onChange:v,page:h}),P=u(),{translate:q}=l.useTranslation();if(w){const t=C.find((e=>"previous"===e.type)),a=C.find((e=>"next"===e.type));return e.jsxs(g,{children:[!!t&&e.jsx(n.IconButton,{"aria-label":q("Previous_page"),"data-testid":"pagination-prev-btn-mobile",disabled:c||t.disabled,onClick:t.onClick,size:f,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.jsx(b,{"data-testid":"pagination-page-mobile",variant:"captionWeak",children:q("page_of_count",{page:h,count:i})})}),!!a&&e.jsx(n.IconButton,{"aria-label":q("Next_page"),"data-testid":"pagination-next-btn-mobile",disabled:c||a.disabled,onClick:a.onClick,size:f,tone:"neutral",variant:"tertiary",children:e.jsx(d,{color:P.palette.semantic.text["text-weak"],size:"md"})})]})}const _="number"==typeof k;return e.jsxs(x,{willRenderRowsPerPage:_,children:[e.jsx(s,{alignItems:"center",direction:"row",gap:P.spacing(1),children:C.map((t=>"previous"===t.type?e.jsx(y,{"aria-label":q("Previous_page"),"data-testid":"pagination-prev-btn",disabled:c||t.disabled,fdKey:"pagination-prev-btn",onClick:t.onClick,size:f,startIcon:e.jsx(o,{color:P.palette.semantic.text["text-weak"],size:"md"}),tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:q("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(y,{"aria-label":q("Next_page"),"data-testid":"pagination-next-btn",disabled:c||t.disabled,endIcon:e.jsx(d,{color:P.palette.semantic.text["text-weak"],size:"md"}),fdKey:"pagination-next-btn",onClick:t.onClick,size:f,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:q("Next")})},t.type):t.selected?e.jsx(m,{"aria-current":"page","aria-label":q("Selected_page_number",{number:String(t.page)}),"data-testid":"pagination-current-page",disabled:c||t.disabled,fdKey:"pagination-page",onClick:t.onClick,size:f,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:t.page})},t.page):e.jsx(n.IconButton,{"aria-label":q("Page_number",{number:String(t.page)}),"data-testid":"pagination-page",disabled:c||t.disabled,fdKey:"pagination-page",onClick:t.onClick,size:f,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:j(h,k,i,q)})})]})};exports.Pagination=k,exports.default=k;
+"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"),r=require("../../atoms/IconButton/index.cjs.js"),n=require("@mui/material/Typography"),s=require("@mui/material/Stack"),o=require("../../../icons/ArrowLeft02/index.cjs.js"),l=require("../../../icons/ArrowRight02/index.cjs.js"),d=require("../../../providers/TranslationProvider.cjs.js"),c=require("@mui/material/styles"),p=require("@mui/material/useMediaQuery"),u=require("@mui/material/styles/useTheme");const g=c.styled("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),x=c.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)}))),m=c.styled(r.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=c.styled(n)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),y=c.styled(i.Button)((()=>({textDecoration:"none"}))),j=(e,t,a,i)=>i("Showing_start_end_of_total",{start:t*(e-1)+1,end:t*e,total:t*a}),k=({pageCount:i=1,boundaryPageCount:n=1,disabled:c=!1,rowsPerPage:k,page:h,onChange:f,size:v="medium"})=>{const w=p((e=>e.breakpoints.down("tablet"))),{items:C}=t({boundaryCount:n,count:i,disabled:c,onChange:f,page:h}),P=u(),{translate:q}=d.useTranslation();if(w){const t=C.find((e=>"previous"===e.type)),a=C.find((e=>"next"===e.type));return e.jsxs(g,{children:[!!t&&e.jsx(r.IconButton,{"aria-label":q("Previous_page"),disabled:c||t.disabled,fdKey:"pagination-prev-btn-mobile",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.jsx(b,{"data-fd":"pagination-page-mobile",variant:"captionWeak",children:q("page_of_count",{page:h,count:i})})}),!!a&&e.jsx(r.IconButton,{"aria-label":q("Next_page"),disabled:c||a.disabled,fdKey:"pagination-next-btn-mobile",onClick:a.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(l,{color:P.palette.semantic.text["text-weak"],size:"md"})})]})}const _="number"==typeof k;return e.jsxs(x,{willRenderRowsPerPage:_,children:[e.jsx(s,{alignItems:"center",direction:"row",gap:P.spacing(1),children:C.map((t=>"previous"===t.type?e.jsx(y,{"aria-label":q("Previous_page"),disabled:c||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:q("Previous")})},t.type):"start-ellipsis"===t.type||"end-ellipsis"===t.type?e.jsx(a,{children:e.jsx(b,{"data-fd":"pagination-ellipsis",variant:"captionWeak",children:"..."})},t.type):"next"===t.type?e.jsx(y,{"aria-label":q("Next_page"),disabled:c||t.disabled,endIcon:e.jsx(l,{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:q("Next")})},t.type):t.selected?e.jsx(m,{"aria-current":"page","aria-label":q("Selected_page_number",{number:String(t.page)}),disabled:c||t.disabled,fdKey:"pagination-current-page",onClick:t.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:t.page})},t.page):e.jsx(r.IconButton,{"aria-label":q("Page_number",{number:String(t.page)}),disabled:c||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-fd":"pagination-page-range",variant:"captionWeak",children:j(h,k,i,q)})})]})};exports.Pagination=k,exports.default=k;
 //# sourceMappingURL=index.cjs.js.map

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

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

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import"@mui/material/Pagination";import a from"@mui/material/usePagination/usePagination";import i from"@mui/material/Box";import{Button as r}from"../../atoms/Button/index.js";import{IconButton as n}from"../../atoms/IconButton/index.js";import o from"@mui/material/Typography";import s from"@mui/material/Stack";import d from"../../../icons/ArrowLeft02/index.js";import l from"../../../icons/ArrowRight02/index.js";import{useTranslation as p}from"../../../providers/TranslationProvider.js";import{styled as c}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import g from"@mui/material/styles/useTheme";const u=c("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),b=c("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=c(n)((({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"]}`}}))),f=c(o)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),k=c(r)((()=>({textDecoration:"none"}))),h=(e,t,a,i)=>i("Showing_start_end_of_total",{start:t*(e-1)+1,end:t*e,total:t*a}),y=({pageCount:r=1,boundaryPageCount:o=1,disabled:c=!1,rowsPerPage:y,page:v,onChange:w,size:C="medium"})=>{const P=m((e=>e.breakpoints.down("tablet"))),{items:_}=a({boundaryCount:o,count:r,disabled:c,onChange:w,page:v}),z=g(),{translate:R}=p();if(P){const a=_.find((e=>"previous"===e.type)),i=_.find((e=>"next"===e.type));return e(u,{children:[!!a&&t(n,{"aria-label":R("Previous_page"),"data-testid":"pagination-prev-btn-mobile",disabled:c||a.disabled,onClick:a.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(d,{color:z.palette.semantic.text["text-weak"],size:"md"})}),t(s,{alignItems:"center",flexGrow:1,children:t(f,{"data-testid":"pagination-page-mobile",variant:"captionWeak",children:R("page_of_count",{page:v,count:r})})}),!!i&&t(n,{"aria-label":R("Next_page"),"data-testid":"pagination-next-btn-mobile",disabled:c||i.disabled,onClick:i.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(l,{color:z.palette.semantic.text["text-weak"],size:"md"})})]})}return e(b,{willRenderRowsPerPage:"number"==typeof y,children:[t(s,{alignItems:"center",direction:"row",gap:z.spacing(1),children:_.map((e=>"previous"===e.type?t(k,{"aria-label":R("Previous_page"),"data-testid":"pagination-prev-btn",disabled:c||e.disabled,fdKey:"pagination-prev-btn",onClick:e.onClick,size:C,startIcon:t(d,{color:z.palette.semantic.text["text-weak"],size:"md"}),tone:"neutral",variant:"tertiary",children:t(f,{variant:"captionWeak",children:R("Previous")})},e.type):"start-ellipsis"===e.type||"end-ellipsis"===e.type?t(i,{children:t(f,{"data-testid":"pagination-ellipsis",variant:"captionWeak",children:"..."})},e.type):"next"===e.type?t(k,{"aria-label":R("Next_page"),"data-testid":"pagination-next-btn",disabled:c||e.disabled,endIcon:t(l,{color:z.palette.semantic.text["text-weak"],size:"md"}),fdKey:"pagination-next-btn",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(f,{variant:"captionWeak",children:R("Next")})},e.type):e.selected?t(x,{"aria-current":"page","aria-label":R("Selected_page_number",{number:String(e.page)}),"data-testid":"pagination-current-page",disabled:c||e.disabled,fdKey:"pagination-page",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(f,{variant:"captionWeak",children:e.page})},e.page):t(n,{"aria-label":R("Page_number",{number:String(e.page)}),"data-testid":"pagination-page",disabled:c||e.disabled,fdKey:"pagination-page",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(f,{variant:"captionWeak",children:e.page})},e.page)))}),t(s,{alignItems:"center",flexGrow:0,children:"number"==typeof y&&t(f,{"data-testid":"pagination-page-range",variant:"captionWeak",children:h(v,y,r,R)})})]})};export{y as Pagination,y as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import"@mui/material/Pagination";import a from"@mui/material/usePagination/usePagination";import i from"@mui/material/Box";import{Button as r}from"../../atoms/Button/index.js";import{IconButton as n}from"../../atoms/IconButton/index.js";import o from"@mui/material/Typography";import s from"@mui/material/Stack";import d from"../../../icons/ArrowLeft02/index.js";import l from"../../../icons/ArrowRight02/index.js";import{useTranslation as p}from"../../../providers/TranslationProvider.js";import{styled as c}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import g from"@mui/material/styles/useTheme";const u=c("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),b=c("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)}))),f=c(n)((({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"]}`}}))),k=c(o)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),x=c(r)((()=>({textDecoration:"none"}))),y=(e,t,a,i)=>i("Showing_start_end_of_total",{start:t*(e-1)+1,end:t*e,total:t*a}),h=({pageCount:r=1,boundaryPageCount:o=1,disabled:c=!1,rowsPerPage:h,page:v,onChange:w,size:C="medium"})=>{const P=m((e=>e.breakpoints.down("tablet"))),{items:_}=a({boundaryCount:o,count:r,disabled:c,onChange:w,page:v}),z=g(),{translate:R}=p();if(P){const a=_.find((e=>"previous"===e.type)),i=_.find((e=>"next"===e.type));return e(u,{children:[!!a&&t(n,{"aria-label":R("Previous_page"),disabled:c||a.disabled,fdKey:"pagination-prev-btn-mobile",onClick:a.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(d,{color:z.palette.semantic.text["text-weak"],size:"md"})}),t(s,{alignItems:"center",flexGrow:1,children:t(k,{"data-fd":"pagination-page-mobile",variant:"captionWeak",children:R("page_of_count",{page:v,count:r})})}),!!i&&t(n,{"aria-label":R("Next_page"),disabled:c||i.disabled,fdKey:"pagination-next-btn-mobile",onClick:i.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(l,{color:z.palette.semantic.text["text-weak"],size:"md"})})]})}return e(b,{willRenderRowsPerPage:"number"==typeof h,children:[t(s,{alignItems:"center",direction:"row",gap:z.spacing(1),children:_.map((e=>"previous"===e.type?t(x,{"aria-label":R("Previous_page"),disabled:c||e.disabled,fdKey:"pagination-prev-btn",onClick:e.onClick,size:C,startIcon:t(d,{color:z.palette.semantic.text["text-weak"],size:"md"}),tone:"neutral",variant:"tertiary",children:t(k,{variant:"captionWeak",children:R("Previous")})},e.type):"start-ellipsis"===e.type||"end-ellipsis"===e.type?t(i,{children:t(k,{"data-fd":"pagination-ellipsis",variant:"captionWeak",children:"..."})},e.type):"next"===e.type?t(x,{"aria-label":R("Next_page"),disabled:c||e.disabled,endIcon:t(l,{color:z.palette.semantic.text["text-weak"],size:"md"}),fdKey:"pagination-next-btn",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(k,{variant:"captionWeak",children:R("Next")})},e.type):e.selected?t(f,{"aria-current":"page","aria-label":R("Selected_page_number",{number:String(e.page)}),disabled:c||e.disabled,fdKey:"pagination-current-page",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(k,{variant:"captionWeak",children:e.page})},e.page):t(n,{"aria-label":R("Page_number",{number:String(e.page)}),disabled:c||e.disabled,fdKey:"pagination-page",onClick:e.onClick,size:C,tone:"neutral",variant:"tertiary",children:t(k,{variant:"captionWeak",children:e.page})},e.page)))}),t(s,{alignItems:"center",flexGrow:0,children:"number"==typeof h&&t(k,{"data-fd":"pagination-page-range",variant:"captionWeak",children:y(v,h,r,R)})})]})};export{h as Pagination,h as default};
 //# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Rating"),a=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("@mui/material/Typography"),n=require("../../../providers/TranslationProvider.cjs.js"),s=require("../../atoms/Link/index.cjs.js"),l=require("./icons/index.cjs.js");const o=a.styled(r,{shouldForwardProp:e=>"layout"!==e})((({theme:e,layout:t})=>({display:"flex",flexDirection:"horizontal"===t?"row":"column",gap:"horizontal"===t?e.spacing(1):e.spacing(.5),justifyContent:"center"}))),d=a.styled(r)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"center"}))),c=a.styled(r)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(.5),justifyContent:"flex-start"}))),u=a.styled(i)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),m=a.styled(i)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),p={heart:{empty:e.jsx(l.HeartEmptyIcon,{"data-testid":"heart-empty-icon"}),filled:e.jsx(l.HeartFilledIcon,{"data-testid":"heart-filled-icon"})},star:{empty:e.jsx(l.StarEmptyIcon,{"data-testid":"star-empty-icon"}),filled:e.jsx(l.StarFilledIcon,{"data-testid":"star-filled-icon"})}},y=({fdKey:a,layout:r="horizontal",linkFdKey:i,linkHref:l,max:y=5,onChange:x,reviews:h=0,type:f="star",value:j,...g})=>{const{translate:v}=n.useTranslation(),_=p[f].empty,q=p[f].filled,I=h>0&&i&&l;return e.jsxs(o,{layout:r,children:[e.jsxs(d,{children:[e.jsx(t,{...g,"data-fd":a,emptyIcon:_,getLabelText:e=>v("heart"===f?"number_out_of_total_hearts":"number_out_of_total_stars",{number:e,total:y}),icon:q,max:y,name:a,onChange:(e,t)=>{x?.(e,null!==t?t:0)},precision:.5,readOnly:void 0===x,value:j}),e.jsx(u,{"aria-hidden":!0,variant:"b1Strong",children:j?.toFixed(1)})]}),I&&e.jsxs(c,{children:["vertical"===r&&e.jsxs(m,{variant:"captionWeak",children:[v("From")," "]}),e.jsx(s.Link,{fdKey:i,href:l,size:"caption",tone:"Brand",children:1===h?v("one_review"):v("total_reviews",{total:h})})]})]})};exports.Rating=y,exports.default=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Rating"),a=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("@mui/material/Typography"),n=require("../../../providers/TranslationProvider.cjs.js"),l=require("../../atoms/Link/index.cjs.js"),s=require("./icons/index.cjs.js");const o=a.styled(r,{shouldForwardProp:e=>"layout"!==e})((({theme:e,layout:t})=>({display:"flex",flexDirection:"horizontal"===t?"row":"column",gap:"horizontal"===t?e.spacing(1):e.spacing(.5),justifyContent:"center"}))),d=a.styled(r)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"center"}))),c=a.styled(r)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(.5),justifyContent:"flex-start"}))),u=a.styled(i)((({theme:e})=>({color:e.palette.semantic.text["text-strong"]}))),m=a.styled(i)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),p={heart:{empty:e.jsx(s.HeartEmptyIcon,{"data-fd":"heart-empty-icon"}),filled:e.jsx(s.HeartFilledIcon,{"data-fd":"heart-filled-icon"})},star:{empty:e.jsx(s.StarEmptyIcon,{"data-fd":"star-empty-icon"}),filled:e.jsx(s.StarFilledIcon,{"data-fd":"star-filled-icon"})}},y=({fdKey:a,layout:r="horizontal",linkFdKey:i,linkHref:s,max:y=5,onChange:x,reviews:f=0,type:h="star",value:j,...g})=>{const{translate:v}=n.useTranslation(),_=p[h].empty,q=p[h].filled,I=f>0&&i&&s;return e.jsxs(o,{layout:r,children:[e.jsxs(d,{children:[e.jsx(t,{...g,"data-fd":a,emptyIcon:_,getLabelText:e=>v("heart"===h?"number_out_of_total_hearts":"number_out_of_total_stars",{number:e,total:y}),icon:q,max:y,name:a,onChange:(e,t)=>{x?.(e,null!==t?t:0)},precision:.5,readOnly:void 0===x,value:j}),e.jsx(u,{"aria-hidden":!0,variant:"b1Strong",children:j?.toFixed(1)})]}),I&&e.jsxs(c,{children:["vertical"===r&&e.jsxs(m,{variant:"captionWeak",children:[v("From")," "]}),e.jsx(l.Link,{fdKey:i,href:s,size:"caption",tone:"Brand",children:1===f?v("one_review"):v("total_reviews",{total:f})})]})]})};exports.Rating=y,exports.default=y;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Rating/index.tsx"],"sourcesContent":["import MuiRating, { type RatingProps as MuiRatingProps } from '@mui/material/Rating';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport Link from '../../atoms/Link';\nimport { HeartEmptyIcon, HeartFilledIcon, StarEmptyIcon, StarFilledIcon } from './icons';\n\ntype BaseRatingProps = Omit<\n  MuiRatingProps,\n  'emptyIcon' | 'icon' | 'onChange' | 'precision' | 'readOnly' | 'value'\n> & {\n  /** The identifier for the rating component */\n  fdKey: string;\n  /** The function to call when the rating value changes */\n  onChange?: (event: React.SyntheticEvent, value: number) => void;\n  /** The type of rating component to use */\n  type?: 'heart' | 'star';\n  /** The value of the rating component */\n  value: number;\n};\n\ninterface NonReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | undefined;\n  /** The identifier for the link component */\n  linkFdKey?: never;\n  /** The href for the link component */\n  linkHref?: never;\n  /** The number of reviews */\n  reviews?: never;\n}\n\ninterface ReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | 'vertical';\n  /** The identifier for the link component */\n  linkFdKey: string;\n  /** The href for the link component */\n  linkHref: string;\n  /** The number of reviews */\n  reviews: number;\n}\n\n/**\n * The props for the Rating component.\n */\nexport type RatingProps = NonReviewRatingProps | ReviewRatingProps;\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'layout' })<{\n  layout: RatingProps['layout'];\n}>(({ theme, layout }) => ({\n  display: 'flex',\n  flexDirection: layout === 'horizontal' ? 'row' : 'column',\n  gap: layout === 'horizontal' ? theme.spacing(1) : theme.spacing(0.5),\n  justifyContent: 'center',\n}));\n\nconst StyledIconContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n  justifyContent: 'center',\n}));\n\nconst StyledReviewsContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  justifyContent: 'flex-start',\n}));\n\nconst StyledValueText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledReviewsText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst iconMap = {\n  heart: {\n    empty: <HeartEmptyIcon data-testid=\"heart-empty-icon\" />,\n    filled: <HeartFilledIcon data-testid=\"heart-filled-icon\" />,\n  },\n  star: {\n    empty: <StarEmptyIcon data-testid=\"star-empty-icon\" />,\n    filled: <StarFilledIcon data-testid=\"star-filled-icon\" />,\n  },\n};\n\n/**\n * Rating component allows users to provide feedback by rating items with stars.\n *\n * @param props - Additional props to pass to the underlying MUI Rating component\n * @returns A Rating component\n */\nexport const Rating: React.FC<RatingProps> = ({\n  fdKey,\n  layout = 'horizontal',\n  linkFdKey,\n  linkHref,\n  max = 5,\n  onChange,\n  reviews = 0,\n  type = 'star',\n  value,\n  ...props\n}) => {\n  const { translate } = useTranslation();\n\n  const emptyIcon = iconMap[type].empty;\n  const icon = iconMap[type].filled;\n\n  const isReview = reviews > 0 && linkFdKey && linkHref;\n\n  const handleChange = (event: React.SyntheticEvent, value: number | null): void => {\n    if (value !== null) onChange?.(event, value);\n    else onChange?.(event, 0);\n  };\n\n  const getLabelText = (labelValue: number): string => {\n    if (type === 'heart') {\n      return translate('number_out_of_total_hearts', { number: labelValue, total: max });\n    }\n    return translate('number_out_of_total_stars', { number: labelValue, total: max });\n  };\n\n  return (\n    <StyledContainer layout={layout}>\n      <StyledIconContainer>\n        <MuiRating\n          {...props}\n          data-fd={fdKey}\n          emptyIcon={emptyIcon}\n          getLabelText={getLabelText}\n          icon={icon}\n          max={max}\n          name={fdKey}\n          onChange={handleChange}\n          precision={0.5}\n          readOnly={onChange === undefined}\n          value={value}\n        />\n        <StyledValueText aria-hidden variant=\"b1Strong\">\n          {value?.toFixed(1)}\n        </StyledValueText>\n      </StyledIconContainer>\n      {isReview && (\n        <StyledReviewsContainer>\n          {layout === 'vertical' && (\n            <StyledReviewsText variant=\"captionWeak\">{translate('From')} </StyledReviewsText>\n          )}\n          <Link fdKey={linkFdKey} href={linkHref} size=\"caption\" tone=\"Brand\">\n            {reviews === 1 ? translate('one_review') : translate('total_reviews', { total: reviews })}\n          </Link>\n        </StyledReviewsContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Rating;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","layout","display","flexDirection","gap","spacing","justifyContent","StyledIconContainer","alignItems","StyledReviewsContainer","StyledValueText","Typography","color","palette","semantic","text","StyledReviewsText","iconMap","heart","empty","_jsx","HeartEmptyIcon","filled","HeartFilledIcon","star","StarEmptyIcon","StarFilledIcon","Rating","fdKey","linkFdKey","linkHref","max","onChange","reviews","type","value","props","translate","useTranslation","emptyIcon","icon","isReview","_jsxs","children","MuiRating","getLabelText","labelValue","number","total","name","event","precision","readOnly","undefined","variant","toFixed","Link","href","size","tone"],"mappings":"wXAmDA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,WAATA,GAA3CH,EAErB,EAAGI,QAAOC,aAAQ,CACnBC,QAAS,OACTC,cAA0B,eAAXF,EAA0B,MAAQ,SACjDG,IAAgB,eAAXH,EAA0BD,EAAMK,QAAQ,GAAKL,EAAMK,QAAQ,IAChEC,eAAgB,aAGZC,EAAsBX,EAAAA,OAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,GACnBC,eAAgB,aAGZG,EAAyBb,EAAAA,OAAOC,EAAPD,EAAY,EAAGI,YAAO,CACnDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,IACnBC,eAAgB,iBAGZI,EAAkBd,EAAAA,OAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACnDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,mBAG/BC,EAAoBpB,EAAAA,OAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACrDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,iBAG/BE,EAAU,CACdC,MAAO,CACLC,MAAOC,EAAAA,IAACC,EAAAA,eAAc,CAAA,cAAa,qBACnCC,OAAQF,EAAAA,IAACG,EAAAA,gBAAe,CAAA,cAAa,uBAEvCC,KAAM,CACJL,MAAOC,EAAAA,IAACK,EAAAA,cAAa,CAAA,cAAa,oBAClCH,OAAQF,EAAAA,IAACM,EAAAA,eAAc,CAAA,cAAa,uBAU3BC,EAAgC,EAC3CC,QACA3B,SAAS,aACT4B,YACAC,WACAC,MAAM,EACNC,WACAC,UAAU,EACVC,OAAO,OACPC,WACGC,MAEH,MAAMC,UAAEA,GAAcC,mBAEhBC,EAAYtB,EAAQiB,GAAMf,MAC1BqB,EAAOvB,EAAQiB,GAAMZ,OAErBmB,EAAWR,EAAU,GAAKJ,GAAaC,EAc7C,OACEY,EAAAA,KAAC/C,EAAe,CAACM,OAAQA,EAAM0C,SAAA,CAC7BD,EAAAA,KAACnC,EAAmB,CAAAoC,SAAA,CAClBvB,MAACwB,MACKR,EAAK,UACAR,EACTW,UAAWA,EACXM,aAdcC,GAEXT,EADI,UAATH,EACe,6BAEF,4BAFgC,CAAEa,OAAQD,EAAYE,MAAOjB,IAaxES,KAAMA,EACNT,IAAKA,EACLkB,KAAMrB,EACNI,SAvBa,CAACkB,EAA6Bf,KAC7BH,IAAWkB,EAAjB,OAAVf,EAAkCA,EACf,IAsBjBgB,UAAW,GACXC,cAAuBC,IAAbrB,EACVG,MAAOA,IAETf,EAAAA,IAACV,oBAA4B4C,QAAQ,WAAUX,SAC5CR,GAAOoB,QAAQ,QAGnBd,GACCC,OAACjC,aACa,aAAXR,GACCyC,OAAC1B,EAAiB,CAACsC,QAAQ,cAAaX,SAAA,CAAEN,EAAU,QAAO,OAE7DjB,EAAAA,IAACoC,EAAAA,KAAI,CAAC5B,MAAOC,EAAW4B,KAAM3B,EAAU4B,KAAK,UAAUC,KAAK,QAAOhB,SACpD,IAAZV,EAAgBI,EAAU,cAAgBA,EAAU,gBAAiB,CAAEW,MAAOf"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Rating/index.tsx"],"sourcesContent":["import MuiRating, { type RatingProps as MuiRatingProps } from '@mui/material/Rating';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport Link from '../../atoms/Link';\nimport { HeartEmptyIcon, HeartFilledIcon, StarEmptyIcon, StarFilledIcon } from './icons';\n\ntype BaseRatingProps = Omit<\n  MuiRatingProps,\n  'emptyIcon' | 'icon' | 'onChange' | 'precision' | 'readOnly' | 'value'\n> & {\n  /** The identifier for the rating component */\n  fdKey: string;\n  /** The function to call when the rating value changes */\n  onChange?: (event: React.SyntheticEvent, value: number) => void;\n  /** The type of rating component to use */\n  type?: 'heart' | 'star';\n  /** The value of the rating component */\n  value: number;\n};\n\ninterface NonReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | undefined;\n  /** The identifier for the link component */\n  linkFdKey?: never;\n  /** The href for the link component */\n  linkHref?: never;\n  /** The number of reviews */\n  reviews?: never;\n}\n\ninterface ReviewRatingProps extends BaseRatingProps {\n  /** The layout of the rating component */\n  layout?: 'horizontal' | 'vertical';\n  /** The identifier for the link component */\n  linkFdKey: string;\n  /** The href for the link component */\n  linkHref: string;\n  /** The number of reviews */\n  reviews: number;\n}\n\n/**\n * The props for the Rating component.\n */\nexport type RatingProps = NonReviewRatingProps | ReviewRatingProps;\n\nconst StyledContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'layout' })<{\n  layout: RatingProps['layout'];\n}>(({ theme, layout }) => ({\n  display: 'flex',\n  flexDirection: layout === 'horizontal' ? 'row' : 'column',\n  gap: layout === 'horizontal' ? theme.spacing(1) : theme.spacing(0.5),\n  justifyContent: 'center',\n}));\n\nconst StyledIconContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n  justifyContent: 'center',\n}));\n\nconst StyledReviewsContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  justifyContent: 'flex-start',\n}));\n\nconst StyledValueText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-strong'],\n}));\n\nconst StyledReviewsText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst iconMap = {\n  heart: {\n    empty: <HeartEmptyIcon data-fd=\"heart-empty-icon\" />,\n    filled: <HeartFilledIcon data-fd=\"heart-filled-icon\" />,\n  },\n  star: {\n    empty: <StarEmptyIcon data-fd=\"star-empty-icon\" />,\n    filled: <StarFilledIcon data-fd=\"star-filled-icon\" />,\n  },\n};\n\n/**\n * Rating component allows users to provide feedback by rating items with stars.\n *\n * @param props - Additional props to pass to the underlying MUI Rating component\n * @returns A Rating component\n */\nexport const Rating: React.FC<RatingProps> = ({\n  fdKey,\n  layout = 'horizontal',\n  linkFdKey,\n  linkHref,\n  max = 5,\n  onChange,\n  reviews = 0,\n  type = 'star',\n  value,\n  ...props\n}) => {\n  const { translate } = useTranslation();\n\n  const emptyIcon = iconMap[type].empty;\n  const icon = iconMap[type].filled;\n\n  const isReview = reviews > 0 && linkFdKey && linkHref;\n\n  const handleChange = (event: React.SyntheticEvent, value: number | null): void => {\n    if (value !== null) onChange?.(event, value);\n    else onChange?.(event, 0);\n  };\n\n  const getLabelText = (labelValue: number): string => {\n    if (type === 'heart') {\n      return translate('number_out_of_total_hearts', { number: labelValue, total: max });\n    }\n    return translate('number_out_of_total_stars', { number: labelValue, total: max });\n  };\n\n  return (\n    <StyledContainer layout={layout}>\n      <StyledIconContainer>\n        <MuiRating\n          {...props}\n          data-fd={fdKey}\n          emptyIcon={emptyIcon}\n          getLabelText={getLabelText}\n          icon={icon}\n          max={max}\n          name={fdKey}\n          onChange={handleChange}\n          precision={0.5}\n          readOnly={onChange === undefined}\n          value={value}\n        />\n        <StyledValueText aria-hidden variant=\"b1Strong\">\n          {value?.toFixed(1)}\n        </StyledValueText>\n      </StyledIconContainer>\n      {isReview && (\n        <StyledReviewsContainer>\n          {layout === 'vertical' && (\n            <StyledReviewsText variant=\"captionWeak\">{translate('From')} </StyledReviewsText>\n          )}\n          <Link fdKey={linkFdKey} href={linkHref} size=\"caption\" tone=\"Brand\">\n            {reviews === 1 ? translate('one_review') : translate('total_reviews', { total: reviews })}\n          </Link>\n        </StyledReviewsContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Rating;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","layout","display","flexDirection","gap","spacing","justifyContent","StyledIconContainer","alignItems","StyledReviewsContainer","StyledValueText","Typography","color","palette","semantic","text","StyledReviewsText","iconMap","heart","empty","_jsx","HeartEmptyIcon","filled","HeartFilledIcon","star","StarEmptyIcon","StarFilledIcon","Rating","fdKey","linkFdKey","linkHref","max","onChange","reviews","type","value","props","translate","useTranslation","emptyIcon","icon","isReview","_jsxs","children","MuiRating","getLabelText","labelValue","number","total","name","event","precision","readOnly","undefined","variant","toFixed","Link","href","size","tone"],"mappings":"wXAmDA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAAEC,kBAAoBC,GAAkB,WAATA,GAA3CH,EAErB,EAAGI,QAAOC,aAAQ,CACnBC,QAAS,OACTC,cAA0B,eAAXF,EAA0B,MAAQ,SACjDG,IAAgB,eAAXH,EAA0BD,EAAMK,QAAQ,GAAKL,EAAMK,QAAQ,IAChEC,eAAgB,aAGZC,EAAsBX,EAAAA,OAAOC,EAAPD,EAAY,EAAGI,YAAO,CAChDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,GACnBC,eAAgB,aAGZG,EAAyBb,EAAAA,OAAOC,EAAPD,EAAY,EAAGI,YAAO,CACnDQ,WAAY,SACZN,QAAS,OACTE,IAAKJ,EAAMK,QAAQ,IACnBC,eAAgB,iBAGZI,EAAkBd,EAAAA,OAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACnDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,mBAG/BC,EAAoBpB,EAAAA,OAAOe,EAAPf,EAAmB,EAAGI,YAAO,CACrDY,MAAOZ,EAAMa,QAAQC,SAASC,KAAK,iBAG/BE,EAAU,CACdC,MAAO,CACLC,MAAOC,EAAAA,IAACC,EAAAA,eAAc,CAAA,UAAS,qBAC/BC,OAAQF,EAAAA,IAACG,EAAAA,gBAAe,CAAA,UAAS,uBAEnCC,KAAM,CACJL,MAAOC,EAAAA,IAACK,EAAAA,cAAa,CAAA,UAAS,oBAC9BH,OAAQF,EAAAA,IAACM,EAAAA,eAAc,CAAA,UAAS,uBAUvBC,EAAgC,EAC3CC,QACA3B,SAAS,aACT4B,YACAC,WACAC,MAAM,EACNC,WACAC,UAAU,EACVC,OAAO,OACPC,WACGC,MAEH,MAAMC,UAAEA,GAAcC,mBAEhBC,EAAYtB,EAAQiB,GAAMf,MAC1BqB,EAAOvB,EAAQiB,GAAMZ,OAErBmB,EAAWR,EAAU,GAAKJ,GAAaC,EAc7C,OACEY,EAAAA,KAAC/C,EAAe,CAACM,OAAQA,EAAM0C,SAAA,CAC7BD,EAAAA,KAACnC,EAAmB,CAAAoC,SAAA,CAClBvB,MAACwB,MACKR,EAAK,UACAR,EACTW,UAAWA,EACXM,aAdcC,GAEXT,EADI,UAATH,EACe,6BAEF,4BAFgC,CAAEa,OAAQD,EAAYE,MAAOjB,IAaxES,KAAMA,EACNT,IAAKA,EACLkB,KAAMrB,EACNI,SAvBa,CAACkB,EAA6Bf,KAC7BH,IAAWkB,EAAjB,OAAVf,EAAkCA,EACf,IAsBjBgB,UAAW,GACXC,cAAuBC,IAAbrB,EACVG,MAAOA,IAETf,EAAAA,IAACV,oBAA4B4C,QAAQ,WAAUX,SAC5CR,GAAOoB,QAAQ,QAGnBd,GACCC,OAACjC,aACa,aAAXR,GACCyC,OAAC1B,EAAiB,CAACsC,QAAQ,cAAaX,SAAA,CAAEN,EAAU,QAAO,OAE7DjB,EAAAA,IAACoC,EAAAA,KAAI,CAAC5B,MAAOC,EAAW4B,KAAM3B,EAAU4B,KAAK,UAAUC,KAAK,QAAOhB,SACpD,IAAZV,EAAgBI,EAAU,cAAgBA,EAAU,gBAAiB,CAAEW,MAAOf"}