@flipdish/portal-library 8.5.7 → 8.6.1

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 { type ButtonTone } from '@fd/components/atoms/Button/getButtonStyles';\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\nconst getButtonTone = (tone: ModalTones): ButtonTone => {\n  if (tone === 'destructive') {\n    return 'destructive';\n  }\n  return 'brand';\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                        tone={getButtonTone(tone)}\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","getButtonTone","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":"mlBA0DA,MAAMA,EAAU,CACdC,cAAe,CACbC,QAAS,IAA0B,UACnCC,YAAa,IAA0B,gBAQrCC,EAAwBC,GACrBL,EAAQC,cAAcI,KAGzBC,EAAiBD,GACR,gBAATA,EACK,cAEF,QAQHE,EAAiBC,EAAOC,EAAK,CACjCC,kBAAoBC,IAAU,CAAC,OAAQ,QAAQC,SAASD,IADnCH,EAEC,EAAGK,QAAOC,WAAM,CACtCC,SAAU,WACVC,gBAAiBH,EAAMI,QAAQC,SAASC,WAAW,sBACnDC,OAAQ,OACRC,aAAcR,EAAMS,OAAO,aAC3BC,QAASV,EAAMW,QAAQ,GACvBC,UAAW,4EACXC,QAAS,OACTC,UAAW,OACXC,UAAW,OAGXC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,SAAmB,UAATlB,EAAmB,QAAU,QACvCmB,MAAO,eAAepB,EAAMW,QAAQ,MAGpC,CAACX,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,IAEpC,UAATvB,GAAoB,CACtBkB,SAAU,eAAenB,EAAMW,QAAQ,MACvCS,MAAO,eAAepB,EAAMW,QAAQ,MACpCK,IAAK,OACLS,OAAQzB,EAAMW,QAAQ,GACtBM,KAAMjB,EAAMW,QAAQ,GACpBe,MAAO1B,EAAMW,QAAQ,GACrBO,UAAW,OACXJ,UAAW,OACXC,UAAW,OAEXY,QAAS,OACTC,cAAe,aAIJ,UAAT3B,GAAoB,CACtB4B,OAAQ,eAAe7B,EAAMW,QAAQ,MACrCG,UAAW,eAAed,EAAMW,QAAQ,MACxCI,UAAW,OAEXY,QAAS,OACTC,cAAe,eAKfE,EAAcnC,EAAO,MAAPA,EAAc,EAAGK,YAAO,CAC1CoB,MAAO,OACPS,OAAQ,OACRrB,aAAcR,EAAMS,OAAO,gBAGvBsB,EAAoBpC,EAAOqC,EAAPrC,CAAc,CACtCsC,eAAgB,aAChBC,WAAY,WAGRC,EAAyBxC,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CACnD,CAACA,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,CACjDY,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,cACXC,cAAetC,EAAMW,QAAQ,QAW3B4B,EAAQC,GACZ,EACEC,OACAC,UACAlD,OAAO,UACPS,OAAO,QACP0C,QACAC,cACAC,WACAC,UAAU,GACVC,YACAC,QACAC,eAEA,MAAMjD,EAAQkD,IACRC,EAAmBC,EAAcpD,EAAMqB,YAAYC,KAAKC,EAAiBC,SAEzE6B,EAAiC,iBAAbR,EACpBS,EAAoBR,EAAQS,OAAS,EAE3C,OACEC,EAACC,EAAQ,CAAA,mBACW,qBAAqBT,GAAS,YAAW,kBAC1C,eAAeA,GAAS,YACzCD,UAAWA,EAAS,UACXC,EACTN,QAASA,EACTD,KAAMA,EAAIQ,SAEVS,EAAChE,EAAc,CAACO,KAAMA,EAAMT,KAAMA,EAAIyD,SAAA,CACpCS,EAACvB,EAAsB,CAAAc,SAAA,CACpBJ,GACCa,eACGL,EACCG,EAAC1B,EAAW,CAAC6B,IAAKhB,GAAS,cAAeiB,IAAKf,IAE/CW,EAACK,EAAa,CAACC,KAAMjB,EAAUkB,MAAM,SAASvE,KAAMD,EAAqBC,KAE3EgE,EAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,kBAG7BtB,GACCa,EAACU,EAAU,CAACC,UAAU,KAAKC,GAAI,eAAepB,GAAS,YAAaiB,QAAQ,WAAUhB,SACnFN,IAGJA,GAASC,GAAeY,EAACQ,EAAM,CAAC/D,KAAM,EAAGgE,QAAQ,eACjDrB,GACCY,EAACU,EAAU,CACTG,MAAOrE,EAAMI,QAAQC,SAASiE,KAAK,aACnCF,GAAI,qBAAqBpB,GAAS,YAClCiB,QAAQ,SAAQhB,SAEfL,IAGJK,GACCS,EAAAa,EAAA,CAAAtB,SAAA,CACEO,EAACQ,GAAO/D,KAAM,GAAIgE,QAAQ,eACzBhB,QAINK,GACCI,eACEF,EAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,eAC1BT,EAACzB,EAAiB,CAACyC,UAAWrB,EAAmB,SAAW,cAAexC,QAAS,EAACsC,SACnFO,EAACzB,EAAiB,CAChByC,UAAWrB,EAAmB,iBAAmB,MACjDxC,QAAS,EACTS,MAAO+B,EAAmB,OAAS,uBAElCL,EAAQ2B,KAAI,CAACC,EAAQC,KACpB,MAAMC,MAAEA,EAAKR,GAAEA,KAAOS,GAAgBH,EACtC,OACElB,EAACsB,EAAM,CAEL9B,MAAOoB,GAAM,gBAAgBQ,EAAMG,QAAQ,OAAQ,KAAKC,gBACxDC,UAAW9B,EACX3D,KAAMC,EAAcD,MAChBqF,EAAW5B,SAEd2B,GANIR,GAAM,gBAAgBO,KAASC,EAAMG,QAAQ,OAAQ,KAAKC,mCAoBvFzC,EAAM2C,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport { type ButtonTone } from '@fd/components/atoms/Button/getButtonStyles';\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\nconst getButtonTone = (tone: ModalTones): ButtonTone => {\n  if (tone === 'destructive') {\n    return 'destructive';\n  }\n  return 'brand';\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                        tone={getButtonTone(tone)}\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","getButtonTone","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"),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;
+"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            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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"}
+{"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)}))),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};
+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            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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"}
+{"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-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`)))})]});
+"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> = ({ 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"}
+{"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,CAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,2BAIsC,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,GAAc,CAACuB,EAAGC,IAAUA,EAAQ,GAAGC,IAAKC,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 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};
+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> = ({ 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"}
+{"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,CAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,YAIRI,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,GAAc,CAACuB,EAAGC,IAAUA,EAAQ,GAAGC,IAAKC,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/QuantitySelector/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/InputLabel"),r=require("@mui/material/styles"),i=require("../../../providers/TranslationProvider.cjs.js"),o=require("../../../utilities/numericUtilities.cjs.js"),s=require("../../../icons/Add/index.cjs.js"),n=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/Remove/index.cjs.js"),l=require("@mui/material/Box"),d=require("../../atoms/IconButton/index.cjs.js"),u=require("../../atoms/TextField/index.cjs.js"),c=require("@mui/material/Typography");const p=r.styled(l)((()=>({display:"flex",flexDirection:"column"}))),b=r.styled(l,{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})((({theme:e,isDisabled:t,isError:r})=>({display:"flex",alignItems:"stretch",boxShadow:e.customShadows?.raised,border:(t?"1px":r?"2px":"1px")+" solid",borderColor:t?e.palette.semantic.stroke["stroke-disabled"]:r?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"],borderRadius:e.radius["radius-8"],overflow:"visible",position:"relative",backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],marginTop:e.spacing(.5)}))),m=r.styled(d.IconButton)((({theme:e})=>({border:"none",boxShadow:"none",borderRadius:0,padding:0,"&&:focus, &&:focus-visible":{outline:"none",borderRadius:0,zIndex:2},"&&:focus::after, &&:focus-visible::after":{content:'""',position:"absolute",top:-4.5,right:-2.5,bottom:-4.5,left:-4.5,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3},"&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after":{borderTopLeftRadius:e.radius["radius-12"],borderBottomLeftRadius:e.radius["radius-12"]},"&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after":{borderTopRightRadius:e.radius["radius-12"],borderBottomRightRadius:e.radius["radius-12"],left:-2.5,right:-4.5},"&:hover":{boxShadow:"none",borderRadius:0},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],border:"none",boxShadow:"none"},"&.Mui-disabled > svg":{color:e.palette.semantic.icon["icon-disabled"]}}))),x=r.styled(l)((({theme:e})=>({display:"flex",alignItems:"stretch",width:72,minWidth:56,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",borderRadius:0,"&:focus-within::after":{content:'""',position:"absolute",top:-4,right:-2,bottom:-4,left:-2,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3}}))),f=r.styled(u.TextField,{shouldForwardProp:e=>"isError"!==e})((({theme:e,isError:t=!1})=>({marginTop:"-4px",marginBottom:"-4px",'& [role="textbox"], & input':{textAlign:"center",outline:"none"},"& .MuiOutlinedInput-root":{border:"none",boxShadow:"none",outline:"none",borderRadius:0,backgroundColor:t?e.palette.semantic.fill["fill-error-weak"]:"transparent","&.Mui-disabled":{backgroundColor:"transparent"},"&.Mui-focused":{outline:"none !important"},"&:focus-within":{outline:"none !important"},"&:focus":{outline:"none !important",boxShadow:"none !important"},"&:hover":{background:"none !important",backgroundImage:"none !important"},"& fieldset":{border:"0 !important",borderRadius:0},"&:hover fieldset":{border:"0 !important"},"&.Mui-focused fieldset":{border:"0"}},"& .MuiOutlinedInput-input":{outline:"none",boxShadow:"none","&:focus":{outline:"none",boxShadow:"none"},"&.Mui-disabled":{color:e.palette.semantic.text["text-disabled"],WebkitTextFillColor:e.palette.semantic.text["text-disabled"]}},"& input:focus":{outline:"none !important",boxShadow:"none !important"}}))),h=r.styled("div",{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})((({theme:e,isDisabled:t=!1,isError:r=!1})=>({width:1,alignSelf:"stretch",backgroundColor:t?e.palette.semantic.stroke["stroke-disabled"]:r?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"]}))),g=r.styled(n)((({theme:e})=>({color:e.palette.semantic.icon["icon-error"]}))),v=r.styled(l)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)}))),y=r.styled(c)((({theme:e})=>({color:e.palette.semantic.text["text-error"]}))),j=r.styled(c,{shouldForwardProp:e=>"isDisabled"!==e})((({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]}))),k=({value:r,onChange:n,min:l,max:d,step:u,disabled:c=!1,fdKey:k,label:w="",hint:q="",required:R=!1,valid:C=!0,errorMessage:S=""})=>{const{translate:I}=i.useTranslation(),D=!c&&r>l,E=!c&&r<d;return e.jsxs(p,{children:[w&&e.jsx(t,{disabled:c,htmlFor:k?`${k}-input`:"quantity-input",required:R,children:w}),q&&e.jsx(j,{isDisabled:c,variant:"caption",children:q}),!C&&!!S&&e.jsxs(v,{children:[e.jsx(g,{}),e.jsx(y,{variant:"captionStrong",children:S})]}),e.jsxs(b,{"data-fd":k,isDisabled:c,isError:!C,role:"group",children:[e.jsx(m,{"aria-label":I("Decrease_quantity"),disabled:!D,fdKey:k?`${k}-decrement`:void 0,onClick:()=>{if(!D)return;const e=o.clamp(r-u,l,d);void 0!==e&&n(e)},tone:C?"neutral":"destructive",variant:"tertiary",children:e.jsx(a,{})}),e.jsx(h,{isDisabled:c,isError:!C}),e.jsx(x,{children:e.jsx(f,{fullWidth:!0,"aria-label":I("Quantity"),disabled:c,fdKey:k?`${k}-input`:"quantity-input",isError:!C,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void n(l);const r=o.clamp(Number(t),l,d);void 0!==r&&n(r)},value:String(r)})}),e.jsx(h,{isDisabled:c,isError:!C}),e.jsx(m,{"aria-label":I("Increase_quantity"),disabled:!E,fdKey:k?`${k}-increment`:void 0,onClick:()=>{if(!E)return;const e=o.clamp(r+u,l,d);void 0!==e&&n(e)},tone:C?"neutral":"destructive",variant:"tertiary",children:e.jsx(s,{})})]})]})};exports.QuantitySelector=k,exports.default=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/InputLabel"),r=require("@mui/material/styles"),i=require("../../../providers/TranslationProvider.cjs.js"),o=require("../../../utilities/numericUtilities.cjs.js"),s=require("../../../icons/Add/index.cjs.js"),n=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/Remove/index.cjs.js"),l=require("@mui/material/Box"),d=require("../../atoms/IconButton/index.cjs.js"),u=require("../../atoms/TextField/index.cjs.js"),c=require("@mui/material/Typography");const p=r.styled(l)(()=>({display:"flex",flexDirection:"column"})),b=r.styled(l,{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})(({theme:e,isDisabled:t,isError:r})=>({display:"flex",alignItems:"stretch",boxShadow:e.customShadows?.raised,border:(t?"1px":r?"2px":"1px")+" solid",borderColor:t?e.palette.semantic.stroke["stroke-disabled"]:r?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"],borderRadius:e.radius["radius-8"],overflow:"visible",position:"relative",backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],marginTop:e.spacing(.5)})),m=r.styled(d.IconButton)(({theme:e})=>({border:"none",boxShadow:"none",borderRadius:0,padding:0,"&&:focus, &&:focus-visible":{outline:"none",borderRadius:0,zIndex:2},"&&:focus::after, &&:focus-visible::after":{content:'""',position:"absolute",top:-4.5,right:-2.5,bottom:-4.5,left:-4.5,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3},"&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after":{borderTopLeftRadius:e.radius["radius-12"],borderBottomLeftRadius:e.radius["radius-12"]},"&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after":{borderTopRightRadius:e.radius["radius-12"],borderBottomRightRadius:e.radius["radius-12"],left:-2.5,right:-4.5},"&:hover":{boxShadow:"none",borderRadius:0},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],border:"none",boxShadow:"none"},"&.Mui-disabled > svg":{color:e.palette.semantic.icon["icon-disabled"]}})),x=r.styled(l)(({theme:e})=>({display:"flex",alignItems:"stretch",width:72,minWidth:56,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",borderRadius:0,"&:focus-within::after":{content:'""',position:"absolute",top:-4,right:-2,bottom:-4,left:-2,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3}})),f=r.styled(u.TextField,{shouldForwardProp:e=>"isError"!==e})(({theme:e,isError:t=!1})=>({marginTop:"-4px",marginBottom:"-4px",'& [role="textbox"], & input':{textAlign:"center",outline:"none"},"& .MuiOutlinedInput-root":{border:"none",boxShadow:"none",outline:"none",borderRadius:0,backgroundColor:t?e.palette.semantic.fill["fill-error-weak"]:"transparent","&.Mui-disabled":{backgroundColor:"transparent"},"&.Mui-focused":{outline:"none !important"},"&:focus-within":{outline:"none !important"},"&:focus":{outline:"none !important",boxShadow:"none !important"},"&:hover":{background:"none !important",backgroundImage:"none !important"},"& fieldset":{border:"0 !important",borderRadius:0},"&:hover fieldset":{border:"0 !important"},"&.Mui-focused fieldset":{border:"0"}},"& .MuiOutlinedInput-input":{outline:"none",boxShadow:"none","&:focus":{outline:"none",boxShadow:"none"},"&.Mui-disabled":{color:e.palette.semantic.text["text-disabled"],WebkitTextFillColor:e.palette.semantic.text["text-disabled"]}},"& input:focus":{outline:"none !important",boxShadow:"none !important"}})),h=r.styled("div",{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})(({theme:e,isDisabled:t=!1,isError:r=!1})=>({width:1,alignSelf:"stretch",backgroundColor:t?e.palette.semantic.stroke["stroke-disabled"]:r?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"]})),g=r.styled(n)(({theme:e})=>({color:e.palette.semantic.icon["icon-error"]})),v=r.styled(l)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)})),y=r.styled(c)(({theme:e})=>({color:e.palette.semantic.text["text-error"]})),j=r.styled(c,{shouldForwardProp:e=>"isDisabled"!==e})(({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]})),k=({value:r,onChange:n,min:l,max:d,step:u,disabled:c=!1,fdKey:k,label:w="",hint:q="",required:R=!1,valid:C=!0,errorMessage:S=""})=>{const{translate:I}=i.useTranslation(),D=!c&&r>l,E=!c&&r<d;return e.jsxs(p,{children:[w&&e.jsx(t,{disabled:c,htmlFor:k?`${k}-input`:"quantity-input",required:R,children:w}),q&&e.jsx(j,{isDisabled:c,variant:"caption",children:q}),!C&&!!S&&e.jsxs(v,{children:[e.jsx(g,{}),e.jsx(y,{variant:"captionStrong",children:S})]}),e.jsxs(b,{"data-fd":k,isDisabled:c,isError:!C,role:"group",children:[e.jsx(m,{"aria-label":I("Decrease_quantity"),disabled:!D,fdKey:k?`${k}-decrement`:void 0,onClick:()=>{if(!D)return;const e=o.clamp(r-u,l,d);void 0!==e&&n(e)},tone:C?"neutral":"destructive",variant:"tertiary",children:e.jsx(a,{})}),e.jsx(h,{isDisabled:c,isError:!C}),e.jsx(x,{children:e.jsx(f,{fullWidth:!0,"aria-label":I("Quantity"),disabled:c,fdKey:k?`${k}-input`:"quantity-input",isError:!C,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void n(l);const r=o.clamp(Number(t),l,d);void 0!==r&&n(r)},value:String(r)})}),e.jsx(h,{isDisabled:c,isError:!C}),e.jsx(m,{"aria-label":I("Increase_quantity"),disabled:!E,fdKey:k?`${k}-increment`:void 0,onClick:()=>{if(!E)return;const e=o.clamp(r+u,l,d);void 0!==e&&n(e)},tone:C?"neutral":"destructive",variant:"tertiary",children:e.jsx(s,{})})]})]})};exports.QuantitySelector=k,exports.default=k;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/QuantitySelector/index.tsx"],"sourcesContent":["import MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\n\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { clamp } from '@fd/utilities/numericUtilities';\nimport type { ChangeEvent } from 'react';\n\nimport AddIcon from '../../../icons/Add';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport RemoveIcon from '../../../icons/Remove';\nimport Box from '../../atoms/Box';\nimport IconButton from '../../atoms/IconButton';\nimport TextField from '../../atoms/TextField';\nimport Typography from '../../atoms/Typography';\n\n/**\n * Props for the QuantitySelector component.\n * Controls a numeric input with increment/decrement buttons and min/max bounds.\n */\nexport interface QuantitySelectorProps {\n  /** Current numeric value */\n  value: number;\n  /** Callback fired when the value changes */\n  onChange: (nextValue: number) => void;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Amount to increment/decrement on button clicks */\n  step: number;\n  /** Whether the control is disabled */\n  disabled?: boolean;\n  /** Unique identifier for testing/tracking */\n  fdKey?: string;\n  /** Label text displayed above the control */\n  label?: string;\n  /** Hint text displayed below the label */\n  hint?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the current value is valid */\n  valid?: boolean;\n  /** Error message to display when valid is false */\n  errorMessage?: string;\n}\n\nconst OuterContainer = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst InnerContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['isDisabled', 'isError'].includes(prop as string),\n})<{ isDisabled?: boolean; isError?: boolean }>(({ theme, isDisabled, isError }) => ({\n  display: 'flex',\n  alignItems: 'stretch',\n  boxShadow: theme.customShadows?.raised,\n  // Disabled state should overwrite all (including error thickness)\n  border: `${isDisabled ? '1px' : isError ? '2px' : '1px'} solid`,\n  borderColor: isDisabled\n    ? theme.palette.semantic.stroke['stroke-disabled']\n    : isError\n      ? theme.palette.semantic.stroke['stroke-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'],\n  borderRadius: theme.radius['radius-8'],\n  overflow: 'visible',\n  position: 'relative',\n  backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n  marginTop: theme.spacing(0.5),\n}));\n\nconst ActionButton = styled(IconButton)(({ theme }) => ({\n  border: 'none',\n  boxShadow: 'none',\n  borderRadius: 0,\n  padding: 0,\n  // Limit transitions to avoid perceived zoom effects\n  // Robust square focus indicator drawn inside using a pseudo-element\n  '&&:focus, &&:focus-visible': {\n    outline: 'none',\n    borderRadius: 0,\n    zIndex: 2,\n  },\n  '&&:focus::after, &&:focus-visible::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: -4.5,\n    right: -2.5,\n    bottom: -4.5,\n    left: -4.5,\n    border: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    borderRadius: 0,\n    pointerEvents: 'none',\n    zIndex: 3,\n  },\n  // Round external corners when focusing the edge buttons\n  '&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after': {\n    borderTopLeftRadius: theme.radius['radius-12'],\n    borderBottomLeftRadius: theme.radius['radius-12'],\n  },\n  '&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after': {\n    borderTopRightRadius: theme.radius['radius-12'],\n    borderBottomRightRadius: theme.radius['radius-12'],\n    left: -2.5,\n    right: -4.5,\n  },\n  '&:hover': {\n    boxShadow: 'none',\n    borderRadius: 0,\n  },\n  '&.Mui-disabled': {\n    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    border: 'none',\n    boxShadow: 'none',\n  },\n  '&.Mui-disabled > svg': {\n    color: theme.palette.semantic.icon['icon-disabled'],\n  },\n}));\nconst ValueContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'stretch',\n  width: 72,\n  minWidth: 56,\n  backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n  position: 'relative',\n  borderRadius: 0,\n  // Draw an outer square focus ring for the input area\n  '&:focus-within::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: -4,\n    right: -2,\n    bottom: -4,\n    left: -2,\n    border: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    borderRadius: 0,\n    pointerEvents: 'none',\n    zIndex: 3,\n  },\n}));\nconst ValueField = styled(TextField, {\n  shouldForwardProp: (prop) => prop !== 'isError',\n})<{ isError?: boolean }>(({ theme, isError = false }) => ({\n  marginTop: '-4px',\n  marginBottom: '-4px',\n  '& [role=\"textbox\"], & input': {\n    textAlign: 'center',\n    outline: 'none',\n  },\n  '& .MuiOutlinedInput-root': {\n    border: 'none',\n    boxShadow: 'none',\n    outline: 'none',\n    borderRadius: 0,\n    backgroundColor: isError ? theme.palette.semantic.fill['fill-error-weak'] : 'transparent',\n    // Ensure disabled overrides error background\n    '&.Mui-disabled': {\n      backgroundColor: 'transparent',\n    },\n    // Remove MUI's internal focus ring; the ring is applied on ValueContainer instead\n    '&.Mui-focused': {\n      outline: 'none !important',\n    },\n    '&:focus-within': {\n      outline: 'none !important',\n    },\n    '&:focus': {\n      outline: 'none !important',\n      boxShadow: 'none !important',\n    },\n    '&:hover': {\n      background: 'none !important',\n      backgroundImage: 'none !important',\n    },\n    '& fieldset': {\n      border: '0 !important',\n      borderRadius: 0,\n    },\n    '&:hover fieldset': {\n      border: '0 !important',\n    },\n    '&.Mui-focused fieldset': {\n      border: '0',\n    },\n  },\n  '& .MuiOutlinedInput-input': {\n    outline: 'none',\n    boxShadow: 'none',\n    '&:focus': {\n      outline: 'none',\n      boxShadow: 'none',\n    },\n    '&.Mui-disabled': {\n      color: theme.palette.semantic.text['text-disabled'],\n      WebkitTextFillColor: theme.palette.semantic.text['text-disabled'],\n    },\n  },\n  '& input:focus': {\n    outline: 'none !important',\n    boxShadow: 'none !important',\n  },\n}));\n\nconst VerticalDivider = styled('div', {\n  shouldForwardProp: (prop) => !['isDisabled', 'isError'].includes(prop as string),\n})<{ isDisabled?: boolean; isError?: boolean }>(({ theme, isDisabled = false, isError = false }) => ({\n  width: 1,\n  alignSelf: 'stretch',\n  backgroundColor: isDisabled\n    ? theme.palette.semantic.stroke['stroke-disabled']\n    : isError\n      ? theme.palette.semantic.stroke['stroke-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'],\n}));\n\nconst ErrorIcon = styled(CancelCircleIcon)(({ theme }) => ({\n  color: theme.palette.semantic.icon['icon-error'],\n}));\n\nconst ErrorRow = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(0.5),\n}));\n\nconst ErrorText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-error'],\n}));\n\nconst HintText = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'isDisabled',\n})<{ isDisabled?: boolean }>(({ theme, isDisabled = false }) => ({\n  color: isDisabled ? theme.palette.semantic.text['text-disabled'] : theme.palette.semantic.text['text-weak'],\n}));\n\n/**\n * A quantity selector component with increment/decrement buttons and a numeric input field.\n * Provides min/max clamping, step-based adjustments, and optional label/hint/error display.\n *\n * @param props - Component props\n * @returns A quantity selector control\n */\nexport const QuantitySelector = ({\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  disabled = false,\n  fdKey,\n  label = '',\n  hint = '',\n  required = false,\n  valid = true,\n  errorMessage = '',\n}: QuantitySelectorProps): JSX.Element => {\n  const { translate } = useTranslation();\n\n  const canDecrement = !disabled && value > min;\n  const canIncrement = !disabled && value < max;\n\n  const handleDecrement = (): void => {\n    if (!canDecrement) return;\n    const next = clamp(value - step, min, max);\n    if (next === undefined) return;\n    onChange(next);\n  };\n\n  const handleIncrement = (): void => {\n    if (!canIncrement) return;\n    const next = clamp(value + step, min, max);\n    if (next === undefined) return;\n    onChange(next);\n  };\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const raw = e.target.value;\n    if (raw === '') {\n      onChange(min);\n      return;\n    }\n    const parsed = clamp(Number(raw), min, max);\n    if (parsed === undefined) return;\n    onChange(parsed);\n  };\n\n  return (\n    <OuterContainer>\n      {label && (\n        <MuiInputLabel\n          disabled={disabled}\n          htmlFor={fdKey ? `${fdKey}-input` : 'quantity-input'}\n          required={required}\n        >\n          {label}\n        </MuiInputLabel>\n      )}\n      {hint && (\n        <HintText isDisabled={disabled} variant=\"caption\">\n          {hint}\n        </HintText>\n      )}\n      {!valid && !!errorMessage && (\n        <ErrorRow>\n          <ErrorIcon />\n          <ErrorText variant=\"captionStrong\">{errorMessage}</ErrorText>\n        </ErrorRow>\n      )}\n      <InnerContainer data-fd={fdKey} isDisabled={disabled} isError={!valid} role=\"group\">\n        <ActionButton\n          aria-label={translate('Decrease_quantity')}\n          disabled={!canDecrement}\n          fdKey={fdKey ? `${fdKey}-decrement` : undefined}\n          onClick={handleDecrement}\n          tone={valid ? 'neutral' : 'destructive'}\n          variant=\"tertiary\"\n        >\n          <RemoveIcon />\n        </ActionButton>\n        <VerticalDivider isDisabled={disabled} isError={!valid} />\n        <ValueContainer>\n          <ValueField\n            fullWidth\n            aria-label={translate('Quantity')}\n            disabled={disabled}\n            fdKey={fdKey ? `${fdKey}-input` : 'quantity-input'}\n            isError={!valid}\n            label=\"\"\n            onChange={handleInputChange}\n            value={String(value)}\n          />\n        </ValueContainer>\n        <VerticalDivider isDisabled={disabled} isError={!valid} />\n        <ActionButton\n          aria-label={translate('Increase_quantity')}\n          disabled={!canIncrement}\n          fdKey={fdKey ? `${fdKey}-increment` : undefined}\n          onClick={handleIncrement}\n          tone={valid ? 'neutral' : 'destructive'}\n          variant=\"tertiary\"\n        >\n          <AddIcon />\n        </ActionButton>\n      </InnerContainer>\n    </OuterContainer>\n  );\n};\n\nexport default QuantitySelector;\n"],"names":["OuterContainer","styled","Box","display","flexDirection","InnerContainer","shouldForwardProp","prop","includes","theme","isDisabled","isError","alignItems","boxShadow","customShadows","raised","border","borderColor","palette","semantic","stroke","borderRadius","radius","overflow","position","backgroundColor","fill","marginTop","spacing","ActionButton","IconButton","padding","outline","zIndex","content","top","right","bottom","left","pointerEvents","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","color","icon","ValueContainer","width","minWidth","ValueField","TextField","marginBottom","textAlign","background","backgroundImage","text","WebkitTextFillColor","VerticalDivider","alignSelf","ErrorIcon","CancelCircleIcon","ErrorRow","gap","ErrorText","Typography","HintText","QuantitySelector","value","onChange","min","max","step","disabled","fdKey","label","hint","required","valid","errorMessage","translate","useTranslation","canDecrement","canIncrement","_jsxs","children","_jsx","MuiInputLabel","htmlFor","variant","role","undefined","onClick","next","clamp","tone","RemoveIcon","fullWidth","e","raw","target","parsed","Number","String","AddIcon"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/QuantitySelector/index.tsx"],"sourcesContent":["import MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\n\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { clamp } from '@fd/utilities/numericUtilities';\nimport type { ChangeEvent } from 'react';\n\nimport AddIcon from '../../../icons/Add';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport RemoveIcon from '../../../icons/Remove';\nimport Box from '../../atoms/Box';\nimport IconButton from '../../atoms/IconButton';\nimport TextField from '../../atoms/TextField';\nimport Typography from '../../atoms/Typography';\n\n/**\n * Props for the QuantitySelector component.\n * Controls a numeric input with increment/decrement buttons and min/max bounds.\n */\nexport interface QuantitySelectorProps {\n  /** Current numeric value */\n  value: number;\n  /** Callback fired when the value changes */\n  onChange: (nextValue: number) => void;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Amount to increment/decrement on button clicks */\n  step: number;\n  /** Whether the control is disabled */\n  disabled?: boolean;\n  /** Unique identifier for testing/tracking */\n  fdKey?: string;\n  /** Label text displayed above the control */\n  label?: string;\n  /** Hint text displayed below the label */\n  hint?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Whether the current value is valid */\n  valid?: boolean;\n  /** Error message to display when valid is false */\n  errorMessage?: string;\n}\n\nconst OuterContainer = styled(Box)(() => ({\n  display: 'flex',\n  flexDirection: 'column',\n}));\n\nconst InnerContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['isDisabled', 'isError'].includes(prop as string),\n})<{ isDisabled?: boolean; isError?: boolean }>(({ theme, isDisabled, isError }) => ({\n  display: 'flex',\n  alignItems: 'stretch',\n  boxShadow: theme.customShadows?.raised,\n  // Disabled state should overwrite all (including error thickness)\n  border: `${isDisabled ? '1px' : isError ? '2px' : '1px'} solid`,\n  borderColor: isDisabled\n    ? theme.palette.semantic.stroke['stroke-disabled']\n    : isError\n      ? theme.palette.semantic.stroke['stroke-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'],\n  borderRadius: theme.radius['radius-8'],\n  overflow: 'visible',\n  position: 'relative',\n  backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n  marginTop: theme.spacing(0.5),\n}));\n\nconst ActionButton = styled(IconButton)(({ theme }) => ({\n  border: 'none',\n  boxShadow: 'none',\n  borderRadius: 0,\n  padding: 0,\n  // Limit transitions to avoid perceived zoom effects\n  // Robust square focus indicator drawn inside using a pseudo-element\n  '&&:focus, &&:focus-visible': {\n    outline: 'none',\n    borderRadius: 0,\n    zIndex: 2,\n  },\n  '&&:focus::after, &&:focus-visible::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: -4.5,\n    right: -2.5,\n    bottom: -4.5,\n    left: -4.5,\n    border: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    borderRadius: 0,\n    pointerEvents: 'none',\n    zIndex: 3,\n  },\n  // Round external corners when focusing the edge buttons\n  '&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after': {\n    borderTopLeftRadius: theme.radius['radius-12'],\n    borderBottomLeftRadius: theme.radius['radius-12'],\n  },\n  '&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after': {\n    borderTopRightRadius: theme.radius['radius-12'],\n    borderBottomRightRadius: theme.radius['radius-12'],\n    left: -2.5,\n    right: -4.5,\n  },\n  '&:hover': {\n    boxShadow: 'none',\n    borderRadius: 0,\n  },\n  '&.Mui-disabled': {\n    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n    border: 'none',\n    boxShadow: 'none',\n  },\n  '&.Mui-disabled > svg': {\n    color: theme.palette.semantic.icon['icon-disabled'],\n  },\n}));\nconst ValueContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'stretch',\n  width: 72,\n  minWidth: 56,\n  backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n  position: 'relative',\n  borderRadius: 0,\n  // Draw an outer square focus ring for the input area\n  '&:focus-within::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: -4,\n    right: -2,\n    bottom: -4,\n    left: -2,\n    border: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    borderRadius: 0,\n    pointerEvents: 'none',\n    zIndex: 3,\n  },\n}));\nconst ValueField = styled(TextField, {\n  shouldForwardProp: (prop) => prop !== 'isError',\n})<{ isError?: boolean }>(({ theme, isError = false }) => ({\n  marginTop: '-4px',\n  marginBottom: '-4px',\n  '& [role=\"textbox\"], & input': {\n    textAlign: 'center',\n    outline: 'none',\n  },\n  '& .MuiOutlinedInput-root': {\n    border: 'none',\n    boxShadow: 'none',\n    outline: 'none',\n    borderRadius: 0,\n    backgroundColor: isError ? theme.palette.semantic.fill['fill-error-weak'] : 'transparent',\n    // Ensure disabled overrides error background\n    '&.Mui-disabled': {\n      backgroundColor: 'transparent',\n    },\n    // Remove MUI's internal focus ring; the ring is applied on ValueContainer instead\n    '&.Mui-focused': {\n      outline: 'none !important',\n    },\n    '&:focus-within': {\n      outline: 'none !important',\n    },\n    '&:focus': {\n      outline: 'none !important',\n      boxShadow: 'none !important',\n    },\n    '&:hover': {\n      background: 'none !important',\n      backgroundImage: 'none !important',\n    },\n    '& fieldset': {\n      border: '0 !important',\n      borderRadius: 0,\n    },\n    '&:hover fieldset': {\n      border: '0 !important',\n    },\n    '&.Mui-focused fieldset': {\n      border: '0',\n    },\n  },\n  '& .MuiOutlinedInput-input': {\n    outline: 'none',\n    boxShadow: 'none',\n    '&:focus': {\n      outline: 'none',\n      boxShadow: 'none',\n    },\n    '&.Mui-disabled': {\n      color: theme.palette.semantic.text['text-disabled'],\n      WebkitTextFillColor: theme.palette.semantic.text['text-disabled'],\n    },\n  },\n  '& input:focus': {\n    outline: 'none !important',\n    boxShadow: 'none !important',\n  },\n}));\n\nconst VerticalDivider = styled('div', {\n  shouldForwardProp: (prop) => !['isDisabled', 'isError'].includes(prop as string),\n})<{ isDisabled?: boolean; isError?: boolean }>(({ theme, isDisabled = false, isError = false }) => ({\n  width: 1,\n  alignSelf: 'stretch',\n  backgroundColor: isDisabled\n    ? theme.palette.semantic.stroke['stroke-disabled']\n    : isError\n      ? theme.palette.semantic.stroke['stroke-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'],\n}));\n\nconst ErrorIcon = styled(CancelCircleIcon)(({ theme }) => ({\n  color: theme.palette.semantic.icon['icon-error'],\n}));\n\nconst ErrorRow = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(0.5),\n}));\n\nconst ErrorText = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-error'],\n}));\n\nconst HintText = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'isDisabled',\n})<{ isDisabled?: boolean }>(({ theme, isDisabled = false }) => ({\n  color: isDisabled ? theme.palette.semantic.text['text-disabled'] : theme.palette.semantic.text['text-weak'],\n}));\n\n/**\n * A quantity selector component with increment/decrement buttons and a numeric input field.\n * Provides min/max clamping, step-based adjustments, and optional label/hint/error display.\n *\n * @param props - Component props\n * @returns A quantity selector control\n */\nexport const QuantitySelector = ({\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  disabled = false,\n  fdKey,\n  label = '',\n  hint = '',\n  required = false,\n  valid = true,\n  errorMessage = '',\n}: QuantitySelectorProps): JSX.Element => {\n  const { translate } = useTranslation();\n\n  const canDecrement = !disabled && value > min;\n  const canIncrement = !disabled && value < max;\n\n  const handleDecrement = (): void => {\n    if (!canDecrement) return;\n    const next = clamp(value - step, min, max);\n    if (next === undefined) return;\n    onChange(next);\n  };\n\n  const handleIncrement = (): void => {\n    if (!canIncrement) return;\n    const next = clamp(value + step, min, max);\n    if (next === undefined) return;\n    onChange(next);\n  };\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const raw = e.target.value;\n    if (raw === '') {\n      onChange(min);\n      return;\n    }\n    const parsed = clamp(Number(raw), min, max);\n    if (parsed === undefined) return;\n    onChange(parsed);\n  };\n\n  return (\n    <OuterContainer>\n      {label && (\n        <MuiInputLabel\n          disabled={disabled}\n          htmlFor={fdKey ? `${fdKey}-input` : 'quantity-input'}\n          required={required}\n        >\n          {label}\n        </MuiInputLabel>\n      )}\n      {hint && (\n        <HintText isDisabled={disabled} variant=\"caption\">\n          {hint}\n        </HintText>\n      )}\n      {!valid && !!errorMessage && (\n        <ErrorRow>\n          <ErrorIcon />\n          <ErrorText variant=\"captionStrong\">{errorMessage}</ErrorText>\n        </ErrorRow>\n      )}\n      <InnerContainer data-fd={fdKey} isDisabled={disabled} isError={!valid} role=\"group\">\n        <ActionButton\n          aria-label={translate('Decrease_quantity')}\n          disabled={!canDecrement}\n          fdKey={fdKey ? `${fdKey}-decrement` : undefined}\n          onClick={handleDecrement}\n          tone={valid ? 'neutral' : 'destructive'}\n          variant=\"tertiary\"\n        >\n          <RemoveIcon />\n        </ActionButton>\n        <VerticalDivider isDisabled={disabled} isError={!valid} />\n        <ValueContainer>\n          <ValueField\n            fullWidth\n            aria-label={translate('Quantity')}\n            disabled={disabled}\n            fdKey={fdKey ? `${fdKey}-input` : 'quantity-input'}\n            isError={!valid}\n            label=\"\"\n            onChange={handleInputChange}\n            value={String(value)}\n          />\n        </ValueContainer>\n        <VerticalDivider isDisabled={disabled} isError={!valid} />\n        <ActionButton\n          aria-label={translate('Increase_quantity')}\n          disabled={!canIncrement}\n          fdKey={fdKey ? `${fdKey}-increment` : undefined}\n          onClick={handleIncrement}\n          tone={valid ? 'neutral' : 'destructive'}\n          variant=\"tertiary\"\n        >\n          <AddIcon />\n        </ActionButton>\n      </InnerContainer>\n    </OuterContainer>\n  );\n};\n\nexport default QuantitySelector;\n"],"names":["OuterContainer","styled","Box","display","flexDirection","InnerContainer","shouldForwardProp","prop","includes","theme","isDisabled","isError","alignItems","boxShadow","customShadows","raised","border","borderColor","palette","semantic","stroke","borderRadius","radius","overflow","position","backgroundColor","fill","marginTop","spacing","ActionButton","IconButton","padding","outline","zIndex","content","top","right","bottom","left","pointerEvents","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","color","icon","ValueContainer","width","minWidth","ValueField","TextField","marginBottom","textAlign","background","backgroundImage","text","WebkitTextFillColor","VerticalDivider","alignSelf","ErrorIcon","CancelCircleIcon","ErrorRow","gap","ErrorText","Typography","HintText","QuantitySelector","value","onChange","min","max","step","disabled","fdKey","label","hint","required","valid","errorMessage","translate","useTranslation","canDecrement","canIncrement","_jsxs","children","_jsx","MuiInputLabel","htmlFor","variant","role","undefined","onClick","next","clamp","tone","RemoveIcon","fullWidth","e","raw","target","parsed","Number","String","AddIcon"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"@mui/material/InputLabel";import{styled as r}from"@mui/material/styles";import{useTranslation as i}from"../../../providers/TranslationProvider.js";import{clamp as n}from"../../../utilities/numericUtilities.js";import a from"../../../icons/Add/index.js";import s from"../../../icons/CancelCircle/index.js";import d from"../../../icons/Remove/index.js";import l from"@mui/material/Box";import{IconButton as u}from"../../atoms/IconButton/index.js";import{TextField as c}from"../../atoms/TextField/index.js";import p from"@mui/material/Typography";const m=r(l)((()=>({display:"flex",flexDirection:"column"}))),b=r(l,{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})((({theme:e,isDisabled:t,isError:o})=>({display:"flex",alignItems:"stretch",boxShadow:e.customShadows?.raised,border:(t?"1px":o?"2px":"1px")+" solid",borderColor:t?e.palette.semantic.stroke["stroke-disabled"]:o?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"],borderRadius:e.radius["radius-8"],overflow:"visible",position:"relative",backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],marginTop:e.spacing(.5)}))),f=r(u)((({theme:e})=>({border:"none",boxShadow:"none",borderRadius:0,padding:0,"&&:focus, &&:focus-visible":{outline:"none",borderRadius:0,zIndex:2},"&&:focus::after, &&:focus-visible::after":{content:'""',position:"absolute",top:-4.5,right:-2.5,bottom:-4.5,left:-4.5,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3},"&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after":{borderTopLeftRadius:e.radius["radius-12"],borderBottomLeftRadius:e.radius["radius-12"]},"&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after":{borderTopRightRadius:e.radius["radius-12"],borderBottomRightRadius:e.radius["radius-12"],left:-2.5,right:-4.5},"&:hover":{boxShadow:"none",borderRadius:0},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],border:"none",boxShadow:"none"},"&.Mui-disabled > svg":{color:e.palette.semantic.icon["icon-disabled"]}}))),h=r(l)((({theme:e})=>({display:"flex",alignItems:"stretch",width:72,minWidth:56,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",borderRadius:0,"&:focus-within::after":{content:'""',position:"absolute",top:-4,right:-2,bottom:-4,left:-2,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3}}))),x=r(c,{shouldForwardProp:e=>"isError"!==e})((({theme:e,isError:t=!1})=>({marginTop:"-4px",marginBottom:"-4px",'& [role="textbox"], & input':{textAlign:"center",outline:"none"},"& .MuiOutlinedInput-root":{border:"none",boxShadow:"none",outline:"none",borderRadius:0,backgroundColor:t?e.palette.semantic.fill["fill-error-weak"]:"transparent","&.Mui-disabled":{backgroundColor:"transparent"},"&.Mui-focused":{outline:"none !important"},"&:focus-within":{outline:"none !important"},"&:focus":{outline:"none !important",boxShadow:"none !important"},"&:hover":{background:"none !important",backgroundImage:"none !important"},"& fieldset":{border:"0 !important",borderRadius:0},"&:hover fieldset":{border:"0 !important"},"&.Mui-focused fieldset":{border:"0"}},"& .MuiOutlinedInput-input":{outline:"none",boxShadow:"none","&:focus":{outline:"none",boxShadow:"none"},"&.Mui-disabled":{color:e.palette.semantic.text["text-disabled"],WebkitTextFillColor:e.palette.semantic.text["text-disabled"]}},"& input:focus":{outline:"none !important",boxShadow:"none !important"}}))),g=r("div",{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})((({theme:e,isDisabled:t=!1,isError:o=!1})=>({width:1,alignSelf:"stretch",backgroundColor:t?e.palette.semantic.stroke["stroke-disabled"]:o?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"]}))),v=r(s)((({theme:e})=>({color:e.palette.semantic.icon["icon-error"]}))),k=r(l)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)}))),y=r(p)((({theme:e})=>({color:e.palette.semantic.text["text-error"]}))),w=r(p,{shouldForwardProp:e=>"isDisabled"!==e})((({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]}))),R=({value:r,onChange:s,min:l,max:u,step:c,disabled:p=!1,fdKey:R,label:C="",hint:S="",required:D=!1,valid:E=!0,errorMessage:I=""})=>{const{translate:M}=i(),T=!p&&r>l,j=!p&&r<u;return e(m,{children:[C&&t(o,{disabled:p,htmlFor:R?`${R}-input`:"quantity-input",required:D,children:C}),S&&t(w,{isDisabled:p,variant:"caption",children:S}),!E&&!!I&&e(k,{children:[t(v,{}),t(y,{variant:"captionStrong",children:I})]}),e(b,{"data-fd":R,isDisabled:p,isError:!E,role:"group",children:[t(f,{"aria-label":M("Decrease_quantity"),disabled:!T,fdKey:R?`${R}-decrement`:void 0,onClick:()=>{if(!T)return;const e=n(r-c,l,u);void 0!==e&&s(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(d,{})}),t(g,{isDisabled:p,isError:!E}),t(h,{children:t(x,{fullWidth:!0,"aria-label":M("Quantity"),disabled:p,fdKey:R?`${R}-input`:"quantity-input",isError:!E,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void s(l);const o=n(Number(t),l,u);void 0!==o&&s(o)},value:String(r)})}),t(g,{isDisabled:p,isError:!E}),t(f,{"aria-label":M("Increase_quantity"),disabled:!j,fdKey:R?`${R}-increment`:void 0,onClick:()=>{if(!j)return;const e=n(r+c,l,u);void 0!==e&&s(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(a,{})})]})]})};export{R as QuantitySelector,R as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"@mui/material/InputLabel";import{styled as r}from"@mui/material/styles";import{useTranslation as i}from"../../../providers/TranslationProvider.js";import{clamp as n}from"../../../utilities/numericUtilities.js";import a from"../../../icons/Add/index.js";import s from"../../../icons/CancelCircle/index.js";import d from"../../../icons/Remove/index.js";import l from"@mui/material/Box";import{IconButton as u}from"../../atoms/IconButton/index.js";import{TextField as c}from"../../atoms/TextField/index.js";import p from"@mui/material/Typography";const m=r(l)(()=>({display:"flex",flexDirection:"column"})),b=r(l,{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})(({theme:e,isDisabled:t,isError:o})=>({display:"flex",alignItems:"stretch",boxShadow:e.customShadows?.raised,border:(t?"1px":o?"2px":"1px")+" solid",borderColor:t?e.palette.semantic.stroke["stroke-disabled"]:o?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"],borderRadius:e.radius["radius-8"],overflow:"visible",position:"relative",backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],marginTop:e.spacing(.5)})),f=r(u)(({theme:e})=>({border:"none",boxShadow:"none",borderRadius:0,padding:0,"&&:focus, &&:focus-visible":{outline:"none",borderRadius:0,zIndex:2},"&&:focus::after, &&:focus-visible::after":{content:'""',position:"absolute",top:-4.5,right:-2.5,bottom:-4.5,left:-4.5,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3},"&&:first-of-type:focus::after, &&:first-of-type:focus-visible::after":{borderTopLeftRadius:e.radius["radius-12"],borderBottomLeftRadius:e.radius["radius-12"]},"&&:last-of-type:focus::after, &&:last-of-type:focus-visible::after":{borderTopRightRadius:e.radius["radius-12"],borderBottomRightRadius:e.radius["radius-12"],left:-2.5,right:-4.5},"&:hover":{boxShadow:"none",borderRadius:0},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],border:"none",boxShadow:"none"},"&.Mui-disabled > svg":{color:e.palette.semantic.icon["icon-disabled"]}})),h=r(l)(({theme:e})=>({display:"flex",alignItems:"stretch",width:72,minWidth:56,backgroundColor:e.palette.semantic.fill["fill-inverse-strong"],position:"relative",borderRadius:0,"&:focus-within::after":{content:'""',position:"absolute",top:-4,right:-2,bottom:-4,left:-2,border:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,borderRadius:0,pointerEvents:"none",zIndex:3}})),x=r(c,{shouldForwardProp:e=>"isError"!==e})(({theme:e,isError:t=!1})=>({marginTop:"-4px",marginBottom:"-4px",'& [role="textbox"], & input':{textAlign:"center",outline:"none"},"& .MuiOutlinedInput-root":{border:"none",boxShadow:"none",outline:"none",borderRadius:0,backgroundColor:t?e.palette.semantic.fill["fill-error-weak"]:"transparent","&.Mui-disabled":{backgroundColor:"transparent"},"&.Mui-focused":{outline:"none !important"},"&:focus-within":{outline:"none !important"},"&:focus":{outline:"none !important",boxShadow:"none !important"},"&:hover":{background:"none !important",backgroundImage:"none !important"},"& fieldset":{border:"0 !important",borderRadius:0},"&:hover fieldset":{border:"0 !important"},"&.Mui-focused fieldset":{border:"0"}},"& .MuiOutlinedInput-input":{outline:"none",boxShadow:"none","&:focus":{outline:"none",boxShadow:"none"},"&.Mui-disabled":{color:e.palette.semantic.text["text-disabled"],WebkitTextFillColor:e.palette.semantic.text["text-disabled"]}},"& input:focus":{outline:"none !important",boxShadow:"none !important"}})),g=r("div",{shouldForwardProp:e=>!["isDisabled","isError"].includes(e)})(({theme:e,isDisabled:t=!1,isError:o=!1})=>({width:1,alignSelf:"stretch",backgroundColor:t?e.palette.semantic.stroke["stroke-disabled"]:o?e.palette.semantic.stroke["stroke-error-strong"]:e.palette.semantic.stroke["stroke-strong"]})),v=r(s)(({theme:e})=>({color:e.palette.semantic.icon["icon-error"]})),k=r(l)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)})),y=r(p)(({theme:e})=>({color:e.palette.semantic.text["text-error"]})),w=r(p,{shouldForwardProp:e=>"isDisabled"!==e})(({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]})),R=({value:r,onChange:s,min:l,max:u,step:c,disabled:p=!1,fdKey:R,label:C="",hint:S="",required:D=!1,valid:E=!0,errorMessage:I=""})=>{const{translate:M}=i(),T=!p&&r>l,j=!p&&r<u;return e(m,{children:[C&&t(o,{disabled:p,htmlFor:R?`${R}-input`:"quantity-input",required:D,children:C}),S&&t(w,{isDisabled:p,variant:"caption",children:S}),!E&&!!I&&e(k,{children:[t(v,{}),t(y,{variant:"captionStrong",children:I})]}),e(b,{"data-fd":R,isDisabled:p,isError:!E,role:"group",children:[t(f,{"aria-label":M("Decrease_quantity"),disabled:!T,fdKey:R?`${R}-decrement`:void 0,onClick:()=>{if(!T)return;const e=n(r-c,l,u);void 0!==e&&s(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(d,{})}),t(g,{isDisabled:p,isError:!E}),t(h,{children:t(x,{fullWidth:!0,"aria-label":M("Quantity"),disabled:p,fdKey:R?`${R}-input`:"quantity-input",isError:!E,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void s(l);const o=n(Number(t),l,u);void 0!==o&&s(o)},value:String(r)})}),t(g,{isDisabled:p,isError:!E}),t(f,{"aria-label":M("Increase_quantity"),disabled:!j,fdKey:R?`${R}-increment`:void 0,onClick:()=>{if(!j)return;const e=n(r+c,l,u);void 0!==e&&s(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(a,{})})]})]})};export{R as QuantitySelector,R as default};
 //# sourceMappingURL=index.js.map