@flipdish/portal-library 6.0.0 → 6.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +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("../../../utilities/numericUtilities.cjs.js"),o=require("../../../icons/Add/index.cjs.js"),s=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/Remove/index.cjs.js"),n=require("@mui/material/Box"),l=require("../../atoms/IconButton/index.cjs.js"),d=require("../../atoms/TextField/index.cjs.js"),u=require("@mui/material/Typography");const c=r.styled(n)((()=>({display:"flex",flexDirection:"column"}))),p=r.styled(n,{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)}))),b=r.styled(l.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"]}}))),m=r.styled(n)((({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.styled(d.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"}}))),f=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"]}))),h=r.styled(s)((({theme:e})=>({color:e.palette.semantic.icon["icon-error"]}))),g=r.styled(n)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)}))),v=r.styled(u)((({theme:e})=>({color:e.palette.semantic.text["text-error"]}))),y=r.styled(u,{shouldForwardProp:e=>"isDisabled"!==e})((({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]}))),j=({value:r,onChange:s,min:n,max:l,step:d,disabled:u=!1,fdKey:j,label:k="",hint:w="",required:R=!1,valid:q=!0,errorMessage:C="",decreaseAriaLabel:S,increaseAriaLabel:E,valueAriaLabel:I})=>{const D=!u&&r>n,M=!u&&r<l;return e.jsxs(c,{children:[k&&e.jsx(t,{disabled:u,htmlFor:j?`${j}-input`:"quantity-input",required:R,children:k}),w&&e.jsx(y,{isDisabled:u,variant:"caption",children:w}),!q&&!!C&&e.jsxs(g,{children:[e.jsx(h,{}),e.jsx(v,{variant:"captionStrong",children:C})]}),e.jsxs(p,{"data-fd":j,isDisabled:u,isError:!q,role:"group",children:[e.jsx(b,{"aria-label":S,disabled:!D,fdKey:j?`${j}-decrement`:void 0,onClick:()=>{if(!D)return;const e=i.clamp(r-d,n,l);void 0!==e&&s(e)},tone:q?"neutral":"destructive",variant:"tertiary",children:e.jsx(a,{})}),e.jsx(f,{isDisabled:u,isError:!q}),e.jsx(m,{children:e.jsx(x,{fullWidth:!0,"aria-label":I,disabled:u,fdKey:j?`${j}-input`:"quantity-input",isError:!q,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void s(n);const r=i.clamp(Number(t),n,l);void 0!==r&&s(r)},value:String(r)})}),e.jsx(f,{isDisabled:u,isError:!q}),e.jsx(b,{"aria-label":E,disabled:!M,fdKey:j?`${j}-increment`:void 0,onClick:()=>{if(!M)return;const e=i.clamp(r+d,n,l);void 0!==e&&s(e)},tone:q?"neutral":"destructive",variant:"tertiary",children:e.jsx(o,{})})]})]})};exports.QuantitySelector=j,exports.default=j;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +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 { 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  /** Localized aria-label for the decrement button */\n  decreaseAriaLabel: string;\n  /** Localized aria-label for the increment button */\n  increaseAriaLabel: string;\n  /** Localized aria-label for the numeric input field */\n  valueAriaLabel: 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  decreaseAriaLabel,\n  increaseAriaLabel,\n  valueAriaLabel,\n}: QuantitySelectorProps): JSX.Element => {\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 disabled={disabled} htmlFor={fdKey ? `${fdKey}-input` : 'quantity-input'} required={required}>\n          {label}\n        </MuiInputLabel>\n\n      )}\n      {hint && (\n        <HintText isDisabled={disabled} variant=\"caption\">\n          {hint}\n        </HintText>)}\n      {!valid && !!errorMessage && (\n        <ErrorRow>\n          <ErrorIcon />\n          <ErrorText variant=\"captionStrong\">\n            {errorMessage}\n          </ErrorText>\n        </ErrorRow>\n      )}\n      <InnerContainer data-fd={fdKey} isDisabled={disabled} isError={!valid} role=\"group\">\n        <ActionButton\n          aria-label={decreaseAriaLabel}\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={valueAriaLabel}\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={increaseAriaLabel}\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","decreaseAriaLabel","increaseAriaLabel","valueAriaLabel","canDecrement","canIncrement","_jsxs","children","_jsx","MuiInputLabel","htmlFor","variant","role","undefined","onClick","next","clamp","tone","RemoveIcon","fullWidth","e","raw","target","parsed","Number","String","AddIcon"],"mappings":"giBAmDA,MAAMA,EAAiBC,EAAAA,OAAOC,EAAPD,EAAY,KAAA,CACjCE,QAAS,OACTC,cAAe,aAGXC,EAAiBJ,EAAAA,OAAOC,EAAK,CACjCI,kBAAoBC,IAAU,CAAC,aAAc,WAAWC,SAASD,IAD5CN,EAEyB,EAAGQ,QAAOC,aAAYC,cAAS,CAC7ER,QAAS,OACTS,WAAY,UACZC,UAAWJ,EAAMK,eAAeC,OAEhCC,QAAWN,EAAa,MAAQC,EAAU,MAAQ,OAA1C,SACRM,YAAaP,EACTD,EAAMS,QAAQC,SAASC,OAAO,mBAC9BT,EACEF,EAAMS,QAAQC,SAASC,OAAO,uBAC9BX,EAAMS,QAAQC,SAASC,OAAO,iBACpCC,aAAcZ,EAAMa,OAAO,YAC3BC,SAAU,UACVC,SAAU,WACVC,gBAAiBhB,EAAMS,QAAQC,SAASO,KAAK,uBAC7CC,UAAWlB,EAAMmB,QAAQ,QAGrBC,EAAe5B,EAAAA,OAAO6B,EAAAA,WAAP7B,EAAmB,EAAGQ,YAAO,CAChDO,OAAQ,OACRH,UAAW,OACXQ,aAAc,EACdU,QAAS,EAGT,6BAA8B,CAC5BC,QAAS,OACTX,aAAc,EACdY,OAAQ,GAEV,2CAA4C,CAC1CC,QAAS,KACTV,SAAU,WACVW,KAAK,IACLC,OAAO,IACPC,QAAQ,IACRC,MAAM,IACNtB,OAAQ,aAAaP,EAAMS,QAAQC,SAASC,OAAO,kBACnDC,aAAc,EACdkB,cAAe,OACfN,OAAQ,GAGV,uEAAwE,CACtEO,oBAAqB/B,EAAMa,OAAO,aAClCmB,uBAAwBhC,EAAMa,OAAO,cAEvC,qEAAsE,CACpEoB,qBAAsBjC,EAAMa,OAAO,aACnCqB,wBAAyBlC,EAAMa,OAAO,aACtCgB,MAAM,IACNF,OAAO,KAET,UAAW,CACTvB,UAAW,OACXQ,aAAc,GAEhB,iBAAkB,CAChBI,gBAAiBhB,EAAMS,QAAQC,SAASO,KAAK,uBAC7CV,OAAQ,OACRH,UAAW,QAEb,uBAAwB,CACtB+B,MAAOnC,EAAMS,QAAQC,SAAS0B,KAAK,sBAGjCC,EAAiB7C,EAAAA,OAAOC,EAAPD,EAAY,EAAGQ,YAAO,CAC3CN,QAAS,OACTS,WAAY,UACZmC,MAAO,GACPC,SAAU,GACVvB,gBAAiBhB,EAAMS,QAAQC,SAASO,KAAK,uBAC7CF,SAAU,WACVH,aAAc,EAEd,wBAAyB,CACvBa,QAAS,KACTV,SAAU,WACVW,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNtB,OAAQ,aAAaP,EAAMS,QAAQC,SAASC,OAAO,kBACnDC,aAAc,EACdkB,cAAe,OACfN,OAAQ,OAGNgB,EAAahD,EAAAA,OAAOiD,YAAW,CACnC5C,kBAAoBC,GAAkB,YAATA,GADZN,EAEO,EAAGQ,QAAOE,WAAU,MAAO,CACnDgB,UAAW,OACXwB,aAAc,OACd,8BAA+B,CAC7BC,UAAW,SACXpB,QAAS,QAEX,2BAA4B,CAC1BhB,OAAQ,OACRH,UAAW,OACXmB,QAAS,OACTX,aAAc,EACdI,gBAAiBd,EAAUF,EAAMS,QAAQC,SAASO,KAAK,mBAAqB,cAE5E,iBAAkB,CAChBD,gBAAiB,eAGnB,gBAAiB,CACfO,QAAS,mBAEX,iBAAkB,CAChBA,QAAS,mBAEX,UAAW,CACTA,QAAS,kBACTnB,UAAW,mBAEb,UAAW,CACTwC,WAAY,kBACZC,gBAAiB,mBAEnB,aAAc,CACZtC,OAAQ,eACRK,aAAc,GAEhB,mBAAoB,CAClBL,OAAQ,gBAEV,yBAA0B,CACxBA,OAAQ,MAGZ,4BAA6B,CAC3BgB,QAAS,OACTnB,UAAW,OACX,UAAW,CACTmB,QAAS,OACTnB,UAAW,QAEb,iBAAkB,CAChB+B,MAAOnC,EAAMS,QAAQC,SAASoC,KAAK,iBACnCC,oBAAqB/C,EAAMS,QAAQC,SAASoC,KAAK,mBAGrD,gBAAiB,CACfvB,QAAS,kBACTnB,UAAW,uBAIT4C,EAAkBxD,EAAAA,OAAO,MAAO,CACpCK,kBAAoBC,IAAU,CAAC,aAAc,WAAWC,SAASD,IAD3CN,EAEwB,EAAGQ,QAAOC,cAAa,EAAOC,WAAU,MAAO,CAC7FoC,MAAO,EACPW,UAAW,UACXjC,gBAAiBf,EACbD,EAAMS,QAAQC,SAASC,OAAO,mBAC9BT,EACEF,EAAMS,QAAQC,SAASC,OAAO,uBAC9BX,EAAMS,QAAQC,SAASC,OAAO,qBAGhCuC,EAAY1D,EAAAA,OAAO2D,EAAP3D,EAAyB,EAAGQ,YAAO,CACnDmC,MAAOnC,EAAMS,QAAQC,SAAS0B,KAAK,kBAG/BgB,EAAW5D,EAAAA,OAAOC,EAAPD,EAAY,EAAGQ,YAAO,CACrCN,QAAS,OACTS,WAAY,SACZkD,IAAKrD,EAAMmB,QAAQ,GACnBD,UAAWlB,EAAMmB,QAAQ,QAGrBmC,EAAY9D,EAAAA,OAAO+D,EAAP/D,EAAmB,EAAGQ,YAAO,CAC7CmC,MAAOnC,EAAMS,QAAQC,SAASoC,KAAK,kBAG/BU,EAAWhE,EAAAA,OAAO+D,EAAY,CAClC1D,kBAAoBC,GAAkB,eAATA,GADdN,EAEY,EAAGQ,QAAOC,cAAa,MAAO,CACzDkC,MAAOlC,EAAaD,EAAMS,QAAQC,SAASoC,KAAK,iBAAmB9C,EAAMS,QAAQC,SAASoC,KAAK,iBAUpFW,EAAmB,EAC9BC,QACAC,WACAC,MACAC,MACAC,OACAC,YAAW,EACXC,QACAC,QAAQ,GACRC,OAAO,GACPC,YAAW,EACXC,SAAQ,EACRC,eAAe,GACfC,oBACAC,oBACAC,qBAEA,MAAMC,GAAgBV,GAAYL,EAAQE,EACpCc,GAAgBX,GAAYL,EAAQG,EA2B1C,OACEc,EAAAA,KAACpF,EAAc,CAAAqF,SAAA,CACZX,GACCY,EAAAA,IAACC,EAAa,CAACf,SAAUA,EAAUgB,QAASf,EAAQ,GAAGA,UAAgB,iBAAkBG,SAAUA,EAAQS,SACxGX,IAIJC,GACCW,EAAAA,IAACrB,EAAQ,CAACvD,WAAY8D,EAAUiB,QAAQ,UAASJ,SAC9CV,KAEHE,KAAWC,GACXM,EAAAA,KAACvB,aACCyB,EAAAA,IAAC3B,EAAS,IACV2B,EAAAA,IAACvB,EAAS,CAAC0B,QAAQ,gBAAeJ,SAC/BP,OAIPM,EAAAA,KAAC/E,EAAc,CAAA,UAAUoE,EAAO/D,WAAY8D,EAAU7D,SAAUkE,EAAOa,KAAK,QAAOL,SAAA,CACjFC,MAACzD,EAAY,CAAA,aACCkD,EACZP,UAAWU,EACXT,MAAOA,EAAQ,GAAGA,mBAAoBkB,EACtCC,QAlDgB,KACtB,IAAKV,EAAc,OACnB,MAAMW,EAAOC,EAAAA,MAAM3B,EAAQI,EAAMF,EAAKC,QACzBqB,IAATE,GACJzB,EAASyB,IA+CHE,KAAMlB,EAAQ,UAAY,cAC1BY,QAAQ,WAAUJ,SAElBC,EAAAA,IAACU,EAAU,CAAA,KAEbV,MAAC7B,EAAe,CAAC/C,WAAY8D,EAAU7D,SAAUkE,IACjDS,EAAAA,IAACxC,EAAc,CAAAuC,SACbC,EAAAA,IAACrC,EAAU,CACTgD,WAAS,EAAA,aACGhB,EACZT,SAAUA,EACVC,MAAOA,EAAQ,GAAGA,UAAgB,iBAClC9D,SAAUkE,EACVH,MAAM,GACNN,SAnDiB8B,IACzB,MAAMC,EAAMD,EAAEE,OAAOjC,MACrB,GAAY,KAARgC,EAEF,YADA/B,EAASC,GAGX,MAAMgC,EAASP,EAAAA,MAAMQ,OAAOH,GAAM9B,EAAKC,QACxBqB,IAAXU,GACJjC,EAASiC,IA4CDlC,MAAOoC,OAAOpC,OAGlBmB,EAAAA,IAAC7B,EAAe,CAAC/C,WAAY8D,EAAU7D,SAAUkE,IACjDS,MAACzD,EAAY,CAAA,aACCmD,EACZR,UAAWW,EACXV,MAAOA,EAAQ,GAAGA,mBAAoBkB,EACtCC,QAnEgB,KACtB,IAAKT,EAAc,OACnB,MAAMU,EAAOC,EAAAA,MAAM3B,EAAQI,EAAMF,EAAKC,QACzBqB,IAATE,GACJzB,EAASyB,IAgEHE,KAAMlB,EAAQ,UAAY,cAC1BY,QAAQ,WAAUJ,SAElBC,EAAAA,IAACkB,EAAO,CAAA"}

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

@@ -0,0 +1,47 @@
+/**
+ * Props for the QuantitySelector component.
+ * Controls a numeric input with increment/decrement buttons and min/max bounds.
+ */
+interface QuantitySelectorProps {
+    /** Current numeric value */
+    value: number;
+    /** Callback fired when the value changes */
+    onChange: (nextValue: number) => void;
+    /** Minimum allowed value */
+    min: number;
+    /** Maximum allowed value */
+    max: number;
+    /** Amount to increment/decrement on button clicks */
+    step: number;
+    /** Whether the control is disabled */
+    disabled?: boolean;
+    /** Unique identifier for testing/tracking */
+    fdKey?: string;
+    /** Label text displayed above the control */
+    label?: string;
+    /** Hint text displayed below the label */
+    hint?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the current value is valid */
+    valid?: boolean;
+    /** Error message to display when valid is false */
+    errorMessage?: string;
+    /** Localized aria-label for the decrement button */
+    decreaseAriaLabel: string;
+    /** Localized aria-label for the increment button */
+    increaseAriaLabel: string;
+    /** Localized aria-label for the numeric input field */
+    valueAriaLabel: string;
+}
+/**
+ * A quantity selector component with increment/decrement buttons and a numeric input field.
+ * Provides min/max clamping, step-based adjustments, and optional label/hint/error display.
+ *
+ * @param props - Component props
+ * @returns A quantity selector control
+ */
+declare const QuantitySelector: ({ value, onChange, min, max, step, disabled, fdKey, label, hint, required, valid, errorMessage, decreaseAriaLabel, increaseAriaLabel, valueAriaLabel, }: QuantitySelectorProps) => JSX.Element;
+
+export { QuantitySelector, QuantitySelector as default };
+export type { QuantitySelectorProps };

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

@@ -0,0 +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{clamp as i}from"../../../utilities/numericUtilities.js";import a from"../../../icons/Add/index.js";import n from"../../../icons/CancelCircle/index.js";import s from"../../../icons/Remove/index.js";import l from"@mui/material/Box";import{IconButton as d}from"../../atoms/IconButton/index.js";import{TextField as u}from"../../atoms/TextField/index.js";import c from"@mui/material/Typography";const p=r(l)((()=>({display:"flex",flexDirection:"column"}))),m=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)}))),b=r(d)((({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"]}}))),f=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}}))),h=r(u,{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"}}))),x=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"]}))),g=r(n)((({theme:e})=>({color:e.palette.semantic.icon["icon-error"]}))),v=r(l)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),marginTop:e.spacing(.5)}))),k=r(c)((({theme:e})=>({color:e.palette.semantic.text["text-error"]}))),w=r(c,{shouldForwardProp:e=>"isDisabled"!==e})((({theme:e,isDisabled:t=!1})=>({color:t?e.palette.semantic.text["text-disabled"]:e.palette.semantic.text["text-weak"]}))),y=({value:r,onChange:n,min:l,max:d,step:u,disabled:c=!1,fdKey:y,label:R="",hint:C="",required:S=!1,valid:E=!0,errorMessage:D="",decreaseAriaLabel:I,increaseAriaLabel:M,valueAriaLabel:T})=>{const j=!c&&r>l,F=!c&&r<d;return e(p,{children:[R&&t(o,{disabled:c,htmlFor:y?`${y}-input`:"quantity-input",required:S,children:R}),C&&t(w,{isDisabled:c,variant:"caption",children:C}),!E&&!!D&&e(v,{children:[t(g,{}),t(k,{variant:"captionStrong",children:D})]}),e(m,{"data-fd":y,isDisabled:c,isError:!E,role:"group",children:[t(b,{"aria-label":I,disabled:!j,fdKey:y?`${y}-decrement`:void 0,onClick:()=>{if(!j)return;const e=i(r-u,l,d);void 0!==e&&n(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(s,{})}),t(x,{isDisabled:c,isError:!E}),t(f,{children:t(h,{fullWidth:!0,"aria-label":T,disabled:c,fdKey:y?`${y}-input`:"quantity-input",isError:!E,label:"",onChange:e=>{const t=e.target.value;if(""===t)return void n(l);const o=i(Number(t),l,d);void 0!==o&&n(o)},value:String(r)})}),t(x,{isDisabled:c,isError:!E}),t(b,{"aria-label":M,disabled:!F,fdKey:y?`${y}-increment`:void 0,onClick:()=>{if(!F)return;const e=i(r+u,l,d);void 0!==e&&n(e)},tone:E?"neutral":"destructive",variant:"tertiary",children:t(a,{})})]})]})};export{y as QuantitySelector,y as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/QuantitySelector/index.tsx"],"sourcesContent":["import MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\n\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  /** Localized aria-label for the decrement button */\n  decreaseAriaLabel: string;\n  /** Localized aria-label for the increment button */\n  increaseAriaLabel: string;\n  /** Localized aria-label for the numeric input field */\n  valueAriaLabel: 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  decreaseAriaLabel,\n  increaseAriaLabel,\n  valueAriaLabel,\n}: QuantitySelectorProps): JSX.Element => {\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 disabled={disabled} htmlFor={fdKey ? `${fdKey}-input` : 'quantity-input'} required={required}>\n          {label}\n        </MuiInputLabel>\n\n      )}\n      {hint && (\n        <HintText isDisabled={disabled} variant=\"caption\">\n          {hint}\n        </HintText>)}\n      {!valid && !!errorMessage && (\n        <ErrorRow>\n          <ErrorIcon />\n          <ErrorText variant=\"captionStrong\">\n            {errorMessage}\n          </ErrorText>\n        </ErrorRow>\n      )}\n      <InnerContainer data-fd={fdKey} isDisabled={disabled} isError={!valid} role=\"group\">\n        <ActionButton\n          aria-label={decreaseAriaLabel}\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={valueAriaLabel}\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={increaseAriaLabel}\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","decreaseAriaLabel","increaseAriaLabel","valueAriaLabel","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/TextBlock/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),i=require("@mui/material/Box"),n=require("../../atoms/IconContainer/index.cjs.js"),r=require("../../atoms/Link/index.cjs.js"),a=require("@mui/material/Typography");const l=t.styled(i,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=t.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),o=({className:t,icon:i=!0,iconAriaLabel:o="Icon",heading:c=!0,secondaryText:d=!0,textLink:x=!0,headingValue:p,secondaryTextValue:m,iconComponent:u,textLinkContent:g="Label",textLinkHref:h,align:f="left",fdKey:y})=>{const k=h&&""!==h.trim()&&"#"!==h;return(void 0).DEV&&x&&!k&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e.jsxs(l,{align:f,className:t,"data-fd":y,"data-testid":y,children:[i&&u&&e.jsx(n,{ariaLabel:o,icon:u,style:"filled",tone:"brand"}),(c||d)&&e.jsxs(s,{children:[c&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:p}),d&&e.jsx(a,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:m})]}),x&&k&&e.jsx(r.Link,{fdKey:y?`${y}-link`:"text-block-link",href:h,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:g})]})};exports.TextBlock=o,exports.default=o;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n    /** Optional CSS class name for custom styling */\n    className?: string;\n    /** Controls visibility of the icon */\n    icon?: boolean;\n    /** Accessible label for the icon (used by screen readers) */\n    iconAriaLabel?: string;\n    /** Controls visibility of the heading */\n    heading?: boolean;\n    /** Controls visibility of the secondary text */\n    secondaryText?: boolean;\n    /** Controls visibility of the text link */\n    textLink?: boolean;\n    /** Text content for the heading */\n    headingValue?: string;\n    /** Text content for the secondary text */\n    secondaryTextValue?: string;\n    /** React node to render as the icon */\n    iconComponent?: React.ReactNode;\n    /** Text content for the link */\n    textLinkContent?: string;\n    /** URL for the text link */\n    textLinkHref?: string;\n    /** Horizontal alignment of content */\n    align?: 'center' | 'left';\n    /** Unique identifier for data-fd and data-testid attributes */\n    fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    paddingTop: theme.spacing(2),\n    alignItems: align === 'center' ? 'center' : 'flex-start',\n    textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n    className,\n    icon = true,\n    iconAriaLabel = 'Icon',\n    heading = true,\n    secondaryText = true,\n    textLink = true,\n    headingValue,\n    secondaryTextValue,\n    iconComponent,\n    textLinkContent = 'Label',\n    textLinkHref,\n    align = 'left',\n    fdKey,\n}) => {\n    // Validate textLinkHref when textLink is enabled\n    const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n    if (import.meta.env.DEV && textLink && !isValidHref) {\n        console.warn(\n            'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n            'The link will not be rendered. Please provide a valid href when textLink is true.'\n        );\n    }\n\n    return (\n        <StyledContainer align={align} className={className} data-fd={fdKey} data-testid={fdKey}>\n            {icon && iconComponent && (\n                <IconContainer\n                    ariaLabel={iconAriaLabel}\n                    icon={iconComponent}\n                    style=\"filled\"\n                    tone=\"brand\"\n                />\n            )}\n\n            {(heading || secondaryText) && (\n                <StyledTextContainer>\n                    {heading && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-strong'] ||\n                                    theme.palette.text.primary,\n                                margin: 0,\n                            })}\n                            variant=\"h3Strong\"\n                        >\n                            {headingValue}\n                        </Typography>\n                    )}\n                    {secondaryText && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-weak'] ||\n                                    theme.palette.text.secondary,\n                                margin: 0,\n                            })}\n                            variant=\"b1Weak\"\n                        >\n                            {secondaryTextValue}\n                        </Typography>\n                    )}\n                </StyledTextContainer>\n            )}\n\n            {textLink && isValidHref && (\n                <Link\n                    fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n                    href={textLinkHref}\n                    size=\"body\"\n                    sx={{ whiteSpace: 'nowrap' }}\n                    tone=\"Brand\"\n                    underline={true}\n                    weight=\"bold\"\n                >\n                    {textLinkContent}\n                </Link>\n            )}\n        </StyledContainer>\n    );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","undefined","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"kUA0CA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAChCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD7BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CACxDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGzCQ,EAAsBd,EAAAA,OAAOC,EAAPD,EAAY,EAAGK,YAAO,CAC9CE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcEC,EAAsC,EAC/CC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,YAPII,GAAgBC,KAAOV,IAAaO,GACpCI,QAAQC,KACJ,uKAMJC,EAAAA,KAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAK,cAAeA,EAAKQ,SAAA,CAClFlB,GAAQO,GACLY,EAAAA,IAACC,EAAa,CACVC,UAAWpB,EACXD,KAAMO,EACNe,MAAM,SACNC,KAAK,WAIXrB,GAAWC,IACTc,EAAAA,KAACrB,EAAmB,CAAAsB,SAAA,CACfhB,GACGiB,EAAAA,IAACK,EAAU,CACPC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAC/B1C,EAAMwC,QAAQE,KAAKC,QACvBC,OAAQ,IAEZC,QAAQ,oBAEP3B,IAGRF,GACGgB,EAAAA,IAACK,GACGC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,cAC/B1C,EAAMwC,QAAQE,KAAKI,UACvBF,OAAQ,IAEZC,QAAQ,SAAQd,SAEfZ,OAMhBF,GAAYO,GACTQ,EAAAA,IAACe,EAAAA,KAAI,CACDxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}

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

@@ -0,0 +1,49 @@
+import react__default from 'react';
+
+/**
+ * Props for the TextBlock component.
+ * Displays a flexible content block with optional icon, heading, secondary text, and link.
+ */
+interface TextBlockProps {
+    /** Optional CSS class name for custom styling */
+    className?: string;
+    /** Controls visibility of the icon */
+    icon?: boolean;
+    /** Accessible label for the icon (used by screen readers) */
+    iconAriaLabel?: string;
+    /** Controls visibility of the heading */
+    heading?: boolean;
+    /** Controls visibility of the secondary text */
+    secondaryText?: boolean;
+    /** Controls visibility of the text link */
+    textLink?: boolean;
+    /** Text content for the heading */
+    headingValue?: string;
+    /** Text content for the secondary text */
+    secondaryTextValue?: string;
+    /** React node to render as the icon */
+    iconComponent?: react__default.ReactNode;
+    /** Text content for the link */
+    textLinkContent?: string;
+    /** URL for the text link */
+    textLinkHref?: string;
+    /** Horizontal alignment of content */
+    align?: 'center' | 'left';
+    /** Unique identifier for data-fd and data-testid attributes */
+    fdKey?: string;
+}
+/**
+ * TextBlock component for displaying flexible content blocks with optional elements.
+ *
+ * This component provides a flexible layout for displaying content with optional icon,
+ * heading, secondary text, and link elements. All elements can be individually controlled
+ * for visibility and content, making it suitable for various use cases like feature cards,
+ * informational blocks, or call-to-action sections.
+ *
+ * @param props - Component props
+ * @returns A styled content block with optional icon, heading, secondary text, and link
+ */
+declare const TextBlock: react__default.FC<TextBlockProps>;
+
+export { TextBlock, TextBlock as default };
+export type { TextBlockProps };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{styled as i}from"@mui/material/styles";import n from"@mui/material/Box";import a from"../../atoms/IconContainer/index.js";import{Link as r}from"../../atoms/Link/index.js";import o from"@mui/material/Typography";const l=i(n,{shouldForwardProp:e=>!["align"].includes(e)})((({theme:e,align:t="left"})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),alignItems:"center"===t?"center":"flex-start",textAlign:"center"===t?"center":"left"}))),s=i(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(1),width:"100%"}))),c=({className:i,icon:n=!0,iconAriaLabel:c="Icon",heading:m=!0,secondaryText:d=!0,textLink:p=!0,headingValue:x,secondaryTextValue:f,iconComponent:g,textLinkContent:h="Label",textLinkHref:u,align:k="left",fdKey:y})=>{const b=u&&""!==u.trim()&&"#"!==u;return import.meta.env.DEV&&p&&!b&&console.warn('TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to "#". The link will not be rendered. Please provide a valid href when textLink is true.'),e(l,{align:k,className:i,"data-fd":y,"data-testid":y,children:[n&&g&&t(a,{ariaLabel:c,icon:g,style:"filled",tone:"brand"}),(m||d)&&e(s,{children:[m&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-strong"]||e.palette.text.primary,margin:0}),variant:"h3Strong",children:x}),d&&t(o,{sx:e=>({color:e.palette.semantic?.text?.["text-weak"]||e.palette.text.secondary,margin:0}),variant:"b1Weak",children:f})]}),p&&b&&t(r,{fdKey:y?`${y}-link`:"text-block-link",href:u,size:"body",sx:{whiteSpace:"nowrap"},tone:"Brand",underline:!0,weight:"bold",children:h})]})};export{c as TextBlock,c as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/TextBlock/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport IconContainer from '@fd/components/atoms/IconContainer';\nimport Link from '@fd/components/atoms/Link';\nimport Typography from '@fd/components/atoms/Typography';\n\n/**\n * Props for the TextBlock component.\n * Displays a flexible content block with optional icon, heading, secondary text, and link.\n */\nexport interface TextBlockProps {\n    /** Optional CSS class name for custom styling */\n    className?: string;\n    /** Controls visibility of the icon */\n    icon?: boolean;\n    /** Accessible label for the icon (used by screen readers) */\n    iconAriaLabel?: string;\n    /** Controls visibility of the heading */\n    heading?: boolean;\n    /** Controls visibility of the secondary text */\n    secondaryText?: boolean;\n    /** Controls visibility of the text link */\n    textLink?: boolean;\n    /** Text content for the heading */\n    headingValue?: string;\n    /** Text content for the secondary text */\n    secondaryTextValue?: string;\n    /** React node to render as the icon */\n    iconComponent?: React.ReactNode;\n    /** Text content for the link */\n    textLinkContent?: string;\n    /** URL for the text link */\n    textLinkHref?: string;\n    /** Horizontal alignment of content */\n    align?: 'center' | 'left';\n    /** Unique identifier for data-fd and data-testid attributes */\n    fdKey?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => !['align'].includes(prop as string),\n})<{ align?: 'center' | 'left' }>(({ theme, align = 'left' }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    paddingTop: theme.spacing(2),\n    alignItems: align === 'center' ? 'center' : 'flex-start',\n    textAlign: align === 'center' ? 'center' : 'left',\n}));\n\nconst StyledTextContainer = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    width: '100%',\n}));\n\n/**\n * TextBlock component for displaying flexible content blocks with optional elements.\n *\n * This component provides a flexible layout for displaying content with optional icon,\n * heading, secondary text, and link elements. All elements can be individually controlled\n * for visibility and content, making it suitable for various use cases like feature cards,\n * informational blocks, or call-to-action sections.\n *\n * @param props - Component props\n * @returns A styled content block with optional icon, heading, secondary text, and link\n */\nexport const TextBlock: React.FC<TextBlockProps> = ({\n    className,\n    icon = true,\n    iconAriaLabel = 'Icon',\n    heading = true,\n    secondaryText = true,\n    textLink = true,\n    headingValue,\n    secondaryTextValue,\n    iconComponent,\n    textLinkContent = 'Label',\n    textLinkHref,\n    align = 'left',\n    fdKey,\n}) => {\n    // Validate textLinkHref when textLink is enabled\n    const isValidHref = textLinkHref && textLinkHref.trim() !== '' && textLinkHref !== '#';\n\n    if (import.meta.env.DEV && textLink && !isValidHref) {\n        console.warn(\n            'TextBlock: textLink is enabled but textLinkHref is missing, empty, or set to \"#\". ' +\n            'The link will not be rendered. Please provide a valid href when textLink is true.'\n        );\n    }\n\n    return (\n        <StyledContainer align={align} className={className} data-fd={fdKey} data-testid={fdKey}>\n            {icon && iconComponent && (\n                <IconContainer\n                    ariaLabel={iconAriaLabel}\n                    icon={iconComponent}\n                    style=\"filled\"\n                    tone=\"brand\"\n                />\n            )}\n\n            {(heading || secondaryText) && (\n                <StyledTextContainer>\n                    {heading && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-strong'] ||\n                                    theme.palette.text.primary,\n                                margin: 0,\n                            })}\n                            variant=\"h3Strong\"\n                        >\n                            {headingValue}\n                        </Typography>\n                    )}\n                    {secondaryText && (\n                        <Typography\n                            sx={(theme) => ({\n                                color:\n                                    theme.palette.semantic?.text?.['text-weak'] ||\n                                    theme.palette.text.secondary,\n                                margin: 0,\n                            })}\n                            variant=\"b1Weak\"\n                        >\n                            {secondaryTextValue}\n                        </Typography>\n                    )}\n                </StyledTextContainer>\n            )}\n\n            {textLink && isValidHref && (\n                <Link\n                    fdKey={fdKey ? `${fdKey}-link` : 'text-block-link'}\n                    href={textLinkHref}\n                    size=\"body\"\n                    sx={{ whiteSpace: 'nowrap' }}\n                    tone=\"Brand\"\n                    underline={true}\n                    weight=\"bold\"\n                >\n                    {textLinkContent}\n                </Link>\n            )}\n        </StyledContainer>\n    );\n};\n\nexport default TextBlock;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","includes","theme","align","display","flexDirection","gap","spacing","paddingTop","alignItems","textAlign","StyledTextContainer","width","TextBlock","className","icon","iconAriaLabel","heading","secondaryText","textLink","headingValue","secondaryTextValue","iconComponent","textLinkContent","textLinkHref","fdKey","isValidHref","trim","env","DEV","console","warn","_jsxs","children","_jsx","IconContainer","ariaLabel","style","tone","Typography","sx","color","palette","semantic","text","primary","margin","variant","secondary","Link","href","size","whiteSpace","underline","weight"],"mappings":"0RA0CA,MAAMA,EAAkBC,EAAOC,EAAK,CAChCC,kBAAoBC,IAAU,CAAC,SAASC,SAASD,IAD7BH,EAEU,EAAGK,QAAOC,QAAQ,WAAQ,CACxDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBC,WAAYN,EAAMK,QAAQ,GAC1BE,WAAsB,WAAVN,EAAqB,SAAW,aAC5CO,UAAqB,WAAVP,EAAqB,SAAW,WAGzCQ,EAAsBd,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CAC9CE,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,GACnBK,MAAO,WAcEC,EAAsC,EAC/CC,YACAC,QAAO,EACPC,gBAAgB,OAChBC,WAAU,EACVC,iBAAgB,EAChBC,YAAW,EACXC,eACAC,qBACAC,gBACAC,kBAAkB,QAClBC,eACArB,QAAQ,OACRsB,YAGA,MAAMC,EAAcF,GAAwC,KAAxBA,EAAaG,QAAkC,MAAjBH,EASlE,mBAPgBI,IAAIC,KAAOV,IAAaO,GACpCI,QAAQC,KACJ,uKAMJC,EAACpC,EAAe,CAACO,MAAOA,EAAOW,UAAWA,EAAS,UAAWW,EAAK,cAAeA,EAAKQ,SAAA,CAClFlB,GAAQO,GACLY,EAACC,EAAa,CACVC,UAAWpB,EACXD,KAAMO,EACNe,MAAM,SACNC,KAAK,WAIXrB,GAAWC,IACTc,EAACrB,EAAmB,CAAAsB,SAAA,CACfhB,GACGiB,EAACK,EAAU,CACPC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,gBAC/B1C,EAAMwC,QAAQE,KAAKC,QACvBC,OAAQ,IAEZC,QAAQ,oBAEP3B,IAGRF,GACGgB,EAACK,GACGC,GAAKtC,IAAK,CACNuC,MACIvC,EAAMwC,QAAQC,UAAUC,OAAO,cAC/B1C,EAAMwC,QAAQE,KAAKI,UACvBF,OAAQ,IAEZC,QAAQ,SAAQd,SAEfZ,OAMhBF,GAAYO,GACTQ,EAACe,EAAI,CACDxB,MAAOA,EAAQ,GAAGA,SAAe,kBACjCyB,KAAM1B,EACN2B,KAAK,OACLX,GAAI,CAAEY,WAAY,UAClBd,KAAK,QACLe,WAAW,EACXC,OAAO,OAAMrB,SAEZV"}

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),o=require("@mui/material/styles/styled"),n=require("@mui/material/Typography/Typography"),r=require("../../../atoms/TextField/index.cjs.js"),l=require("react-images-uploading");const a=o(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),d=o(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),s=o(n)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),c=o(n)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=o("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=o("form")({width:"100%",maxWidth:"400px"}),x=["jpg","jpeg","png","gif","bmp"];module.exports=({selectedImage:i,onImageSelect:o,uploadingError:n,allowImageLinkUpload:C,imageLink:m,onImageLinkChange:h=()=>{},onUploadImageLink:u=()=>{}})=>{const f=e=>{e.preventDefault(),u(m)};return e.jsx(l,{acceptType:x,onChange:e=>{const i=e[0];i&&o(i)},value:i?[i]:[],children:({onImageUpload:o,dragProps:l})=>{const x=`Error occurred while uploading image: ${n?.message?n.message:""}`;return i?.dataURL?e.jsx(g,{src:i.dataURL}):e.jsxs(a,{...l,children:[e.jsx(d,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e.jsx(s,{onClick:o,children:"Select an image"}),e.jsxs(c,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",C&&" OR paste the image URL below"]}),C&&e.jsx(p,{"data-testid":"image-link-form",onSubmit:f,children:e.jsx(r,{fullWidth:!0,fdKey:"img-link",onChange:e=>h(e.target.value),placeholder:"Enter image URL",value:m})})]}),e.jsx(c,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(c,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:n?x:""})]})}})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),o=require("@mui/material/styles/styled"),n=require("@mui/material/Typography/Typography"),r=require("../../../atoms/TextField/index.cjs.js"),l=require("react-images-uploading");const a=o(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),d=o(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),s=o(n)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),c=o(n)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=o("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=o("form")({width:"100%",maxWidth:"400px"}),x=["jpg","jpeg","png","gif","bmp"];module.exports=({selectedImage:i,onImageSelect:o,uploadingError:n,allowImageLinkUpload:C,imageLink:m,onImageLinkChange:h=()=>{},onUploadImageLink:u=()=>{}})=>{const f=e=>{e.preventDefault(),u(m)};return e.jsx(l,{acceptType:x,onChange:e=>{const i=e[0];i&&o(i)},value:i?[i]:[],children:({onImageUpload:o,dragProps:l})=>{const x=`Error occurred while uploading image: ${n?.message?n.message:""}`;return i?.dataURL?e.jsx(g,{src:i.dataURL}):e.jsxs(a,{...l,children:[e.jsx(d,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e.jsx(s,{onClick:o,children:"Select an image"}),e.jsxs(c,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",C&&" OR paste the image URL below"]}),C&&e.jsx(p,{"data-testid":"image-link-form",onSubmit:f,children:e.jsx(r.TextField,{fullWidth:!0,fdKey:"img-link",onChange:e=>h(e.target.value),placeholder:"Enter image URL",value:m})})]}),e.jsx(c,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(c,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:n?x:""})]})}})};
 //# sourceMappingURL=ImageDropZone.cjs.js.map