@flipdish/portal-library 8.5.6 → 8.6.0

package/dist/components/atoms/DatePicker/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport { type DatePickerProps as MuiDatePickerProps,DesktopDatePicker as MuiDatePicker } from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n    fullWidth?: boolean;\n    label?: string;\n    helperText?: string;\n    errorText?: string;\n    disabled?: boolean;\n    required?: boolean;\n    fdKey: string;\n    format?: string;\n    optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n    width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n    fullWidth = false,\n    label = '',\n    helperText = '(dd/mm/yyyy)',\n    errorText = '',\n    disabled = false,\n    required = false,\n    format = 'DD/MM/YYYY',\n    fdKey,\n    optionalText,\n    ...props\n}) => {\n    const theme = useTheme();\n\n    const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n    const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n    const isError = !!errorText && !disabled;\n\n    return (\n        <StyledContainer fullWidth={fullWidth}>\n            <Box mb={theme.spacing(0.5)}>\n                {label && (\n                    <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n                        {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n                    </MuiInputLabel>\n                )}\n\n                {helperText && (\n                    <MuiFormHelperText disabled={disabled} id={helperTextId}>\n                        {helperText}\n                    </MuiFormHelperText>\n                )}\n            </Box>\n            <Box mb={theme.spacing(0.5)}>\n                {isError && (\n                    <MuiFormHelperText error id={errorMessageId}>\n                        <CancelCircleIcon />\n\n                        {errorText}\n                    </MuiFormHelperText>\n                )}\n            </Box>\n            <MuiDatePicker\n                dayOfWeekFormatter={(date) => {\n                    const dayMap: Record<string, string> = {\n                        'Su': 'Su',\n                        'Mo': 'Mo',\n                        'Tu': 'Tu',\n                        'We': 'We',\n                        'Th': 'Th',\n                        'Fr': 'Fr',\n                        'Sa': 'Sa'\n                    };\n                    const dayAbbr = date.format('dd');\n                    return dayMap[dayAbbr] || dayAbbr;\n                }}\n                disabled={disabled}\n                format={format}\n                slotProps={{\n                    ...props.slotProps,\n                    textField: {\n                        id: fdKey,\n                        'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n                        error: isError,\n                        ...props.slotProps?.textField,\n                    },\n                    day: {\n                        disableRipple: true,\n                        sx: {\n                            borderRadius: theme.radius['radius-8'],\n                            '&.Mui-selected': {\n                                backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                                '&.MuiPickersDay-today': {\n                                border: 'none',\n                                '&::after': {\n                                    content: '\"\"',\n                                    position: 'absolute',\n                                    bottom: '2px',\n                                    left: '50%',\n                                    transform: 'translateX(-50%)',\n                                    width: '6px',\n                                    height: '6px',\n                                    borderRadius: '50%',\n                                    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n                                },\n                            },\n                            },\n                            '&.MuiPickersDay-today': {\n                                border: 'none',\n                                '&::after': {\n                                    content: '\"\"',\n                                    position: 'absolute',\n                                    bottom: '2px',\n                                    left: '50%',\n                                    transform: 'translateX(-50%)',\n                                    width: '6px',\n                                    height: '6px',\n                                    borderRadius: '50%',\n                                    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                                },\n                            },\n                        },\n                        ...props.slotProps?.day,\n                    },\n                    desktopPaper: {\n                        sx: {\n                            borderRadius: theme.radius['radius-8'],\n                            boxShadow: theme.customShadows?.overlay,\n                            marginTop: theme.spacing(1),\n                            '& .MuiDayCalendar-header': {\n                                borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n                                marginLeft: theme.spacing(1),\n                                marginRight: theme.spacing(1),\n                            },\n                        },\n                        ...props.slotProps?.desktopPaper,\n                    },\n                }}\n                slots={{\n                    openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']}/>,\n                    calendarHeader: CalendarHeader,\n                    ...props.slots,\n                }}\n                sx={{\n                    width: fullWidth ? '100%' : 'auto',\n                    ...props.sx,\n                }}\n                {...props}\n            />\n        </StyledContainer>\n    );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n    return <DateTimeLocalizationProvider dateAdapter={AdapterMoment}><DatePicker {...props} /></DateTimeLocalizationProvider>;\n};\n\nexport default DatePickerWithAdapter;"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport {\n  type DatePickerProps as MuiDatePickerProps,\n  DesktopDatePicker as MuiDatePicker,\n} from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n  fullWidth?: boolean;\n  label?: string;\n  helperText?: string;\n  errorText?: string;\n  disabled?: boolean;\n  required?: boolean;\n  fdKey: string;\n  format?: string;\n  optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n  fullWidth = false,\n  label = '',\n  helperText = '(dd/mm/yyyy)',\n  errorText = '',\n  disabled = false,\n  required = false,\n  format = 'DD/MM/YYYY',\n  fdKey,\n  optionalText,\n  ...props\n}) => {\n  const theme = useTheme();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  const isError = !!errorText && !disabled;\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box mb={theme.spacing(0.5)}>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n      <Box mb={theme.spacing(0.5)}>\n        {isError && (\n          <MuiFormHelperText error id={errorMessageId}>\n            <CancelCircleIcon />\n\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n      <MuiDatePicker\n        dayOfWeekFormatter={(date) => {\n          const dayMap: Record<string, string> = {\n            Su: 'Su',\n            Mo: 'Mo',\n            Tu: 'Tu',\n            We: 'We',\n            Th: 'Th',\n            Fr: 'Fr',\n            Sa: 'Sa',\n          };\n          const dayAbbr = date.format('dd');\n          return dayMap[dayAbbr] || dayAbbr;\n        }}\n        disabled={disabled}\n        format={format}\n        slotProps={{\n          ...props.slotProps,\n          textField: {\n            id: fdKey,\n            'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n            error: isError,\n            ...props.slotProps?.textField,\n          },\n          day: {\n            disableRipple: true,\n            sx: {\n              borderRadius: theme.radius['radius-8'],\n              '&.Mui-selected': {\n                backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                '&.MuiPickersDay-today': {\n                  border: 'none',\n                  '&::after': {\n                    content: '\"\"',\n                    position: 'absolute',\n                    bottom: '2px',\n                    left: '50%',\n                    transform: 'translateX(-50%)',\n                    width: '6px',\n                    height: '6px',\n                    borderRadius: '50%',\n                    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n                  },\n                },\n              },\n              '&.MuiPickersDay-today': {\n                border: 'none',\n                '&::after': {\n                  content: '\"\"',\n                  position: 'absolute',\n                  bottom: '2px',\n                  left: '50%',\n                  transform: 'translateX(-50%)',\n                  width: '6px',\n                  height: '6px',\n                  borderRadius: '50%',\n                  backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                },\n              },\n            },\n            ...props.slotProps?.day,\n          },\n          desktopPaper: {\n            sx: {\n              borderRadius: theme.radius['radius-8'],\n              boxShadow: theme.customShadows?.overlay,\n              marginTop: theme.spacing(1),\n              '& .MuiDayCalendar-header': {\n                borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n                marginLeft: theme.spacing(1),\n                marginRight: theme.spacing(1),\n              },\n            },\n            ...props.slotProps?.desktopPaper,\n          },\n        }}\n        slots={{\n          openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']} />,\n          calendarHeader: CalendarHeader,\n          ...props.slots,\n        }}\n        sx={{\n          width: fullWidth ? '100%' : 'auto',\n          ...props.sx,\n        }}\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n  return (\n    <DateTimeLocalizationProvider dateAdapter={AdapterMoment}>\n      <DatePicker {...props} />\n    </DateTimeLocalizationProvider>\n  );\n};\n\nexport default DatePickerWithAdapter;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"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"}

package/dist/components/atoms/DatePicker/index.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"@mui/material/FormHelperText";import t from"@mui/material/InputLabel";import{styled as i}from"@mui/material/styles";import{DesktopDatePicker as a}from"@mui/x-date-pickers";import{AdapterMoment as d}from"@mui/x-date-pickers/AdapterMoment";import l from"@mui/material/Box";import s from"@mui/material/Typography";import m from"../../../icons/Calendar02/index.js";import n from"../../../icons/CancelCircle/index.js";import p from"../../../providers/DateTimeLocalizationProvider.js";import c from"@mui/material/styles/useTheme";import{CalendarHeader as u}from"./CalendarHeader.js";const f=i(l,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({width:e?"100%":"auto"}))),h=({fullWidth:i=!1,label:d="",helperText:p="(dd/mm/yyyy)",errorText:h="",disabled:b=!1,required:x=!1,format:y="DD/MM/YYYY",fdKey:g,optionalText:k,...P})=>{const T=c(),M=p?`${g}-helper-text`:void 0,w=h?`${g}-error-message`:void 0,C=!!h&&!b;return r(f,{fullWidth:i,children:[r(l,{mb:T.spacing(.5),children:[d&&r(t,{disabled:b,htmlFor:g,required:x,children:[d," ",k&&e(s,{variant:"captionWeak",children:k})]}),p&&e(o,{disabled:b,id:M,children:p})]}),e(l,{mb:T.spacing(.5),children:C&&r(o,{error:!0,id:w,children:[e(n,{}),h]})}),e(a,{dayOfWeekFormatter:e=>{const r=e.format("dd");return{Su:"Su",Mo:"Mo",Tu:"Tu",We:"We",Th:"Th",Fr:"Fr",Sa:"Sa"}[r]||r},disabled:b,format:y,slotProps:{...P.slotProps,textField:{id:g,"aria-describedby":[M,w].filter(Boolean).join(" "),error:C,...P.slotProps?.textField},day:{disableRipple:!0,sx:{borderRadius:T.radius["radius-8"],"&.Mui-selected":{backgroundColor:T.palette.semantic.fill["fill-selected"],"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:T.palette.semantic.fill["fill-inverse-strong"]}}},"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:T.palette.semantic.fill["fill-selected"]}}},...P.slotProps?.day},desktopPaper:{sx:{borderRadius:T.radius["radius-8"],boxShadow:T.customShadows?.overlay,marginTop:T.spacing(1),"& .MuiDayCalendar-header":{borderBottom:`1px solid ${T.palette.semantic.stroke["stroke-weak"]}`,marginLeft:T.spacing(1),marginRight:T.spacing(1)}},...P.slotProps?.desktopPaper}},slots:{openPickerIcon:()=>e(m,{color:T.palette.semantic.icon["icon-strong"]}),calendarHeader:u,...P.slots},sx:{width:i?"100%":"auto",...P.sx},...P})]})},b=r=>e(p,{dateAdapter:d,children:e(h,{...r})});export{b as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"@mui/material/FormHelperText";import t from"@mui/material/InputLabel";import{styled as i}from"@mui/material/styles";import{DesktopDatePicker as a}from"@mui/x-date-pickers";import{AdapterMoment as d}from"@mui/x-date-pickers/AdapterMoment";import l from"@mui/material/Box";import s from"@mui/material/Typography";import m from"../../../icons/Calendar02/index.js";import n from"../../../icons/CancelCircle/index.js";import p from"../../../providers/DateTimeLocalizationProvider.js";import c from"@mui/material/styles/useTheme";import{CalendarHeader as u}from"./CalendarHeader.js";const f=i(l,{shouldForwardProp:e=>"fullWidth"!==e})(({fullWidth:e=!1})=>({width:e?"100%":"auto"})),h=({fullWidth:i=!1,label:d="",helperText:p="(dd/mm/yyyy)",errorText:h="",disabled:b=!1,required:x=!1,format:y="DD/MM/YYYY",fdKey:g,optionalText:k,...P})=>{const T=c(),M=p?`${g}-helper-text`:void 0,w=h?`${g}-error-message`:void 0,C=!!h&&!b;return r(f,{fullWidth:i,children:[r(l,{mb:T.spacing(.5),children:[d&&r(t,{disabled:b,htmlFor:g,required:x,children:[d," ",k&&e(s,{variant:"captionWeak",children:k})]}),p&&e(o,{disabled:b,id:M,children:p})]}),e(l,{mb:T.spacing(.5),children:C&&r(o,{error:!0,id:w,children:[e(n,{}),h]})}),e(a,{dayOfWeekFormatter:e=>{const r=e.format("dd");return{Su:"Su",Mo:"Mo",Tu:"Tu",We:"We",Th:"Th",Fr:"Fr",Sa:"Sa"}[r]||r},disabled:b,format:y,slotProps:{...P.slotProps,textField:{id:g,"aria-describedby":[M,w].filter(Boolean).join(" "),error:C,...P.slotProps?.textField},day:{disableRipple:!0,sx:{borderRadius:T.radius["radius-8"],"&.Mui-selected":{backgroundColor:T.palette.semantic.fill["fill-selected"],"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:T.palette.semantic.fill["fill-inverse-strong"]}}},"&.MuiPickersDay-today":{border:"none","&::after":{content:'""',position:"absolute",bottom:"2px",left:"50%",transform:"translateX(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:T.palette.semantic.fill["fill-selected"]}}},...P.slotProps?.day},desktopPaper:{sx:{borderRadius:T.radius["radius-8"],boxShadow:T.customShadows?.overlay,marginTop:T.spacing(1),"& .MuiDayCalendar-header":{borderBottom:`1px solid ${T.palette.semantic.stroke["stroke-weak"]}`,marginLeft:T.spacing(1),marginRight:T.spacing(1)}},...P.slotProps?.desktopPaper}},slots:{openPickerIcon:()=>e(m,{color:T.palette.semantic.icon["icon-strong"]}),calendarHeader:u,...P.slots},sx:{width:i?"100%":"auto",...P.sx},...P})]})},b=r=>e(p,{dateAdapter:d,children:e(h,{...r})});export{b as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport { type DatePickerProps as MuiDatePickerProps,DesktopDatePicker as MuiDatePicker } from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n    fullWidth?: boolean;\n    label?: string;\n    helperText?: string;\n    errorText?: string;\n    disabled?: boolean;\n    required?: boolean;\n    fdKey: string;\n    format?: string;\n    optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n    shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n    width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n    fullWidth = false,\n    label = '',\n    helperText = '(dd/mm/yyyy)',\n    errorText = '',\n    disabled = false,\n    required = false,\n    format = 'DD/MM/YYYY',\n    fdKey,\n    optionalText,\n    ...props\n}) => {\n    const theme = useTheme();\n\n    const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n    const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n    const isError = !!errorText && !disabled;\n\n    return (\n        <StyledContainer fullWidth={fullWidth}>\n            <Box mb={theme.spacing(0.5)}>\n                {label && (\n                    <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n                        {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n                    </MuiInputLabel>\n                )}\n\n                {helperText && (\n                    <MuiFormHelperText disabled={disabled} id={helperTextId}>\n                        {helperText}\n                    </MuiFormHelperText>\n                )}\n            </Box>\n            <Box mb={theme.spacing(0.5)}>\n                {isError && (\n                    <MuiFormHelperText error id={errorMessageId}>\n                        <CancelCircleIcon />\n\n                        {errorText}\n                    </MuiFormHelperText>\n                )}\n            </Box>\n            <MuiDatePicker\n                dayOfWeekFormatter={(date) => {\n                    const dayMap: Record<string, string> = {\n                        'Su': 'Su',\n                        'Mo': 'Mo',\n                        'Tu': 'Tu',\n                        'We': 'We',\n                        'Th': 'Th',\n                        'Fr': 'Fr',\n                        'Sa': 'Sa'\n                    };\n                    const dayAbbr = date.format('dd');\n                    return dayMap[dayAbbr] || dayAbbr;\n                }}\n                disabled={disabled}\n                format={format}\n                slotProps={{\n                    ...props.slotProps,\n                    textField: {\n                        id: fdKey,\n                        'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n                        error: isError,\n                        ...props.slotProps?.textField,\n                    },\n                    day: {\n                        disableRipple: true,\n                        sx: {\n                            borderRadius: theme.radius['radius-8'],\n                            '&.Mui-selected': {\n                                backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                                '&.MuiPickersDay-today': {\n                                border: 'none',\n                                '&::after': {\n                                    content: '\"\"',\n                                    position: 'absolute',\n                                    bottom: '2px',\n                                    left: '50%',\n                                    transform: 'translateX(-50%)',\n                                    width: '6px',\n                                    height: '6px',\n                                    borderRadius: '50%',\n                                    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n                                },\n                            },\n                            },\n                            '&.MuiPickersDay-today': {\n                                border: 'none',\n                                '&::after': {\n                                    content: '\"\"',\n                                    position: 'absolute',\n                                    bottom: '2px',\n                                    left: '50%',\n                                    transform: 'translateX(-50%)',\n                                    width: '6px',\n                                    height: '6px',\n                                    borderRadius: '50%',\n                                    backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                                },\n                            },\n                        },\n                        ...props.slotProps?.day,\n                    },\n                    desktopPaper: {\n                        sx: {\n                            borderRadius: theme.radius['radius-8'],\n                            boxShadow: theme.customShadows?.overlay,\n                            marginTop: theme.spacing(1),\n                            '& .MuiDayCalendar-header': {\n                                borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n                                marginLeft: theme.spacing(1),\n                                marginRight: theme.spacing(1),\n                            },\n                        },\n                        ...props.slotProps?.desktopPaper,\n                    },\n                }}\n                slots={{\n                    openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']}/>,\n                    calendarHeader: CalendarHeader,\n                    ...props.slots,\n                }}\n                sx={{\n                    width: fullWidth ? '100%' : 'auto',\n                    ...props.sx,\n                }}\n                {...props}\n            />\n        </StyledContainer>\n    );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n    return <DateTimeLocalizationProvider dateAdapter={AdapterMoment}><DatePicker {...props} /></DateTimeLocalizationProvider>;\n};\n\nexport default DatePickerWithAdapter;"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DatePickerWithAdapter","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/DatePicker/index.tsx"],"sourcesContent":["import MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport {\n  type DatePickerProps as MuiDatePickerProps,\n  DesktopDatePicker as MuiDatePicker,\n} from '@mui/x-date-pickers';\n\nimport AdapterMoment from '@fd/adapters/Moment';\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport Calendar02Icon from '@fd/icons/Calendar02';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport DateTimeLocalizationProvider from '@fd/providers/DateTimeLocalizationProvider';\nimport useTheme from '@fd/utilities/useTheme';\nimport type { Moment } from 'moment';\n\nimport { CalendarHeader } from './CalendarHeader';\n\ninterface DatePickerProps extends MuiDatePickerProps<Moment> {\n  fullWidth?: boolean;\n  label?: string;\n  helperText?: string;\n  errorText?: string;\n  disabled?: boolean;\n  required?: boolean;\n  fdKey: string;\n  format?: string;\n  optionalText?: string;\n}\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst DatePicker: React.FC<DatePickerProps> = ({\n  fullWidth = false,\n  label = '',\n  helperText = '(dd/mm/yyyy)',\n  errorText = '',\n  disabled = false,\n  required = false,\n  format = 'DD/MM/YYYY',\n  fdKey,\n  optionalText,\n  ...props\n}) => {\n  const theme = useTheme();\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  const isError = !!errorText && !disabled;\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      <Box mb={theme.spacing(0.5)}>\n        {label && (\n          <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n            {label} {optionalText && <Typography variant=\"captionWeak\">{optionalText}</Typography>}\n          </MuiInputLabel>\n        )}\n\n        {helperText && (\n          <MuiFormHelperText disabled={disabled} id={helperTextId}>\n            {helperText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n      <Box mb={theme.spacing(0.5)}>\n        {isError && (\n          <MuiFormHelperText error id={errorMessageId}>\n            <CancelCircleIcon />\n\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </Box>\n      <MuiDatePicker\n        dayOfWeekFormatter={(date) => {\n          const dayMap: Record<string, string> = {\n            Su: 'Su',\n            Mo: 'Mo',\n            Tu: 'Tu',\n            We: 'We',\n            Th: 'Th',\n            Fr: 'Fr',\n            Sa: 'Sa',\n          };\n          const dayAbbr = date.format('dd');\n          return dayMap[dayAbbr] || dayAbbr;\n        }}\n        disabled={disabled}\n        format={format}\n        slotProps={{\n          ...props.slotProps,\n          textField: {\n            id: fdKey,\n            'aria-describedby': [helperTextId, errorMessageId].filter(Boolean).join(' '),\n            error: isError,\n            ...props.slotProps?.textField,\n          },\n          day: {\n            disableRipple: true,\n            sx: {\n              borderRadius: theme.radius['radius-8'],\n              '&.Mui-selected': {\n                backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                '&.MuiPickersDay-today': {\n                  border: 'none',\n                  '&::after': {\n                    content: '\"\"',\n                    position: 'absolute',\n                    bottom: '2px',\n                    left: '50%',\n                    transform: 'translateX(-50%)',\n                    width: '6px',\n                    height: '6px',\n                    borderRadius: '50%',\n                    backgroundColor: theme.palette.semantic.fill['fill-inverse-strong'],\n                  },\n                },\n              },\n              '&.MuiPickersDay-today': {\n                border: 'none',\n                '&::after': {\n                  content: '\"\"',\n                  position: 'absolute',\n                  bottom: '2px',\n                  left: '50%',\n                  transform: 'translateX(-50%)',\n                  width: '6px',\n                  height: '6px',\n                  borderRadius: '50%',\n                  backgroundColor: theme.palette.semantic.fill['fill-selected'],\n                },\n              },\n            },\n            ...props.slotProps?.day,\n          },\n          desktopPaper: {\n            sx: {\n              borderRadius: theme.radius['radius-8'],\n              boxShadow: theme.customShadows?.overlay,\n              marginTop: theme.spacing(1),\n              '& .MuiDayCalendar-header': {\n                borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n                marginLeft: theme.spacing(1),\n                marginRight: theme.spacing(1),\n              },\n            },\n            ...props.slotProps?.desktopPaper,\n          },\n        }}\n        slots={{\n          openPickerIcon: () => <Calendar02Icon color={theme.palette.semantic.icon['icon-strong']} />,\n          calendarHeader: CalendarHeader,\n          ...props.slots,\n        }}\n        sx={{\n          width: fullWidth ? '100%' : 'auto',\n          ...props.sx,\n        }}\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nconst DatePickerWithAdapter: React.FC<DatePickerProps> = (props) => {\n  return (\n    <DateTimeLocalizationProvider dateAdapter={AdapterMoment}>\n      <DatePicker {...props} />\n    </DateTimeLocalizationProvider>\n  );\n};\n\nexport default DatePickerWithAdapter;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","fullWidth","width","DatePicker","label","helperText","errorText","disabled","required","format","fdKey","optionalText","props","theme","useTheme","helperTextId","undefined","errorMessageId","isError","_jsxs","children","mb","spacing","MuiInputLabel","htmlFor","_jsx","Typography","variant","MuiFormHelperText","id","error","CancelCircleIcon","MuiDatePicker","dayOfWeekFormatter","date","dayAbbr","Su","Mo","Tu","We","Th","Fr","Sa","slotProps","textField","filter","Boolean","join","day","disableRipple","sx","borderRadius","radius","backgroundColor","palette","semantic","fill","border","content","position","bottom","left","transform","height","desktopPaper","boxShadow","customShadows","overlay","marginTop","borderBottom","stroke","marginLeft","marginRight","slots","openPickerIcon","Calendar02Icon","color","icon","calendarHeader","CalendarHeader","DatePickerWithAdapter","DateTimeLocalizationProvider","dateAdapter","AdapterMoment"],"mappings":"ioBA+BA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,CAEI,EAAGI,aAAY,MAAO,CAChDC,MAAOD,EAAY,OAAS,UAGxBE,EAAwC,EAC5CF,aAAY,EACZG,QAAQ,GACRC,aAAa,eACbC,YAAY,GACZC,YAAW,EACXC,YAAW,EACXC,SAAS,aACTC,QACAC,kBACGC,MAEH,MAAMC,EAAQC,IAERC,EAAeV,EAAa,GAAGK,qBAAsBM,EACrDC,EAAiBX,EAAY,GAAGI,uBAAwBM,EAExDE,IAAYZ,IAAcC,EAEhC,OACEY,EAACvB,EAAe,CAACK,UAAWA,EAASmB,SAAA,CACnCD,EAACrB,EAAG,CAACuB,GAAIR,EAAMS,QAAQ,IAAIF,SAAA,CACxBhB,GACCe,EAACI,EAAa,CAAChB,SAAUA,EAAUiB,QAASd,EAAOF,SAAUA,EAAQY,SAAA,CAClEhB,EAAK,IAAGO,GAAgBc,EAACC,EAAU,CAACC,QAAQ,cAAaP,SAAET,OAI/DN,GACCoB,EAACG,EAAiB,CAACrB,SAAUA,EAAUsB,GAAId,EAAYK,SACpDf,OAIPoB,EAAC3B,EAAG,CAACuB,GAAIR,EAAMS,QAAQ,IAAIF,SACxBF,GACCC,EAACS,EAAiB,CAACE,OAAK,EAACD,GAAIZ,EAAcG,SAAA,CACzCK,EAACM,EAAgB,CAAA,GAEhBzB,OAIPmB,EAACO,EAAa,CACZC,mBAAqBC,IACnB,MASMC,EAAUD,EAAKzB,OAAO,MAC5B,MAVuC,CACrC2B,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGQP,IAAYA,GAE5B5B,SAAUA,EACVE,OAAQA,EACRkC,UAAW,IACN/B,EAAM+B,UACTC,UAAW,CACTf,GAAInB,EACJ,mBAAoB,CAACK,EAAcE,GAAgB4B,OAAOC,SAASC,KAAK,KACxEjB,MAAOZ,KACJN,EAAM+B,WAAWC,WAEtBI,IAAK,CACHC,eAAe,EACfC,GAAI,CACFC,aAActC,EAAMuC,OAAO,YAC3B,iBAAkB,CAChBC,gBAAiBxC,EAAMyC,QAAQC,SAASC,KAAK,iBAC7C,wBAAyB,CACvBC,OAAQ,OACR,WAAY,CACVC,QAAS,KACTC,SAAU,WACVC,OAAQ,MACRC,KAAM,MACNC,UAAW,mBACX5D,MAAO,MACP6D,OAAQ,MACRZ,aAAc,MACdE,gBAAiBxC,EAAMyC,QAAQC,SAASC,KAAK,0BAInD,wBAAyB,CACvBC,OAAQ,OACR,WAAY,CACVC,QAAS,KACTC,SAAU,WACVC,OAAQ,MACRC,KAAM,MACNC,UAAW,mBACX5D,MAAO,MACP6D,OAAQ,MACRZ,aAAc,MACdE,gBAAiBxC,EAAMyC,QAAQC,SAASC,KAAK,uBAIhD5C,EAAM+B,WAAWK,KAEtBgB,aAAc,CACZd,GAAI,CACFC,aAActC,EAAMuC,OAAO,YAC3Ba,UAAWpD,EAAMqD,eAAeC,QAChCC,UAAWvD,EAAMS,QAAQ,GACzB,2BAA4B,CAC1B+C,aAAc,aAAaxD,EAAMyC,QAAQC,SAASe,OAAO,iBACzDC,WAAY1D,EAAMS,QAAQ,GAC1BkD,YAAa3D,EAAMS,QAAQ,QAG5BV,EAAM+B,WAAWqB,eAGxBS,MAAO,CACLC,eAAgB,IAAMjD,EAACkD,GAAeC,MAAO/D,EAAMyC,QAAQC,SAASsB,KAAK,iBACzEC,eAAgBC,KACbnE,EAAM6D,OAEXvB,GAAI,CACFhD,MAAOD,EAAY,OAAS,UACzBW,EAAMsC,OAEPtC,QAMNoE,EAAoDpE,GAEtDa,EAACwD,EAA4B,CAACC,YAAaC,EAAa/D,SACtDK,EAACtB,EAAU,IAAKS"}

package/dist/components/atoms/FlipdishLogo/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/styles"),s=require("@mui/material/styles/useTheme"),t=require("../../../assets/images/flipdish-icon.svg.cjs.js"),a=require("../../../assets/images/flipdish-icon-dark.svg.cjs.js"),r=require("../../../assets/images/flipdish-logo.svg.cjs.js"),d=require("../../../assets/images/flipdish-logo-dark.svg.cjs.js"),m=require("../../../assets/images/flipdish-powered-by.svg.cjs.js"),h=require("../../../assets/images/flipdish-powered-by-dark.svg.cjs.js");const g={small:{minWidth:120,minHeight:32},medium:{minWidth:180,minHeight:48},large:{minWidth:240,minHeight:64}},l={default:{light:r,dark:d},icon:{light:t,dark:a},poweredBy:{light:m,dark:h}},n=i.styled("div",{shouldForwardProp:e=>"size"!==e})((({theme:e,size:i})=>{const s=g[i];return{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:e.spacing({small:1,medium:1.5,large:2}[i]),minWidth:`${s.minWidth}px`,minHeight:`${s.minHeight}px`,imageRendering:"crisp-edges",contain:"layout"}})),o=i.styled("img",{shouldForwardProp:e=>"size"!==e&&"variant"!==e})((({size:e,variant:i})=>{const s={small:.67,medium:1,large:1.33}[e],t={icon:{width:3.58538,height:3,aspectRatio:"57.37/48.00"},default:{width:10.16581,height:3,aspectRatio:"162.65/48.00"},poweredBy:{width:9.42856,height:3,aspectRatio:"150.86/48.00"}}[i];return{objectFit:"contain",imageRendering:"crisp-edges",width:t.width*s+"rem",height:t.height*s+"rem",aspectRatio:t.aspectRatio,minWidth:t.width*s+"rem",minHeight:t.height*s+"rem",maxWidth:"100%",maxHeight:"100%"}})),c=({variant:i="default",theme:t="auto",size:a="medium",ariaLabel:r,className:d,fdKey:m})=>{const h=s(),g="auto"===t?"dark"===h.palette.mode?"dark":"light":t,c=l[i],u="dark"===g?c.dark:c.light;return e.jsx(n,{className:d,"data-fd":m,size:a,children:e.jsx(o,{alt:r,role:"img",size:a,src:u,variant:i})})};c.displayName="FlipdishLogo",exports.FlipdishLogo=c;
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/styles"),s=require("@mui/material/styles/useTheme"),t=require("../../../assets/images/flipdish-icon.svg.cjs.js"),a=require("../../../assets/images/flipdish-icon-dark.svg.cjs.js"),r=require("../../../assets/images/flipdish-logo.svg.cjs.js"),d=require("../../../assets/images/flipdish-logo-dark.svg.cjs.js"),m=require("../../../assets/images/flipdish-powered-by.svg.cjs.js"),h=require("../../../assets/images/flipdish-powered-by-dark.svg.cjs.js");const g={small:{minWidth:120,minHeight:32},medium:{minWidth:180,minHeight:48},large:{minWidth:240,minHeight:64}},l={default:{light:r,dark:d},icon:{light:t,dark:a},poweredBy:{light:m,dark:h}},n=i.styled("div",{shouldForwardProp:e=>"size"!==e})(({theme:e,size:i})=>{const s=g[i];return{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:e.spacing({small:1,medium:1.5,large:2}[i]),minWidth:`${s.minWidth}px`,minHeight:`${s.minHeight}px`,imageRendering:"crisp-edges",contain:"layout"}}),o=i.styled("img",{shouldForwardProp:e=>"size"!==e&&"variant"!==e})(({size:e,variant:i})=>{const s={small:.67,medium:1,large:1.33}[e],t={icon:{width:3.58538,height:3,aspectRatio:"57.37/48.00"},default:{width:10.16581,height:3,aspectRatio:"162.65/48.00"},poweredBy:{width:9.42856,height:3,aspectRatio:"150.86/48.00"}}[i];return{objectFit:"contain",imageRendering:"crisp-edges",width:t.width*s+"rem",height:t.height*s+"rem",aspectRatio:t.aspectRatio,minWidth:t.width*s+"rem",minHeight:t.height*s+"rem",maxWidth:"100%",maxHeight:"100%"}}),c=({variant:i="default",theme:t="auto",size:a="medium",ariaLabel:r,className:d,fdKey:m})=>{const h=s(),g="auto"===t?"dark"===h.palette.mode?"dark":"light":t,c=l[i],u="dark"===g?c.dark:c.light;return e.jsx(n,{className:d,"data-fd":m,size:a,children:e.jsx(o,{alt:r,role:"img",size:a,src:u,variant:i})})};c.displayName="FlipdishLogo",exports.FlipdishLogo=c;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/FlipdishLogo/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/FlipdishLogo/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\r\nimport useTheme from '@mui/material/styles/useTheme';\r\n\r\nimport flipdishIcon from '../../../assets/images/flipdish-icon.svg';\r\nimport flipdishIconDark from '../../../assets/images/flipdish-icon-dark.svg';\r\nimport flipdishLogo from '../../../assets/images/flipdish-logo.svg';\r\nimport flipdishLogoDark from '../../../assets/images/flipdish-logo-dark.svg';\r\nimport flipdishPoweredBy from '../../../assets/images/flipdish-powered-by.svg';\r\nimport flipdishPoweredByDark from '../../../assets/images/flipdish-powered-by-dark.svg';\r\n\r\nexport type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';\r\nexport type FlipdishLogoTheme = 'auto' | 'dark' | 'light';\r\nexport type FlipdishLogoSize = 'large' | 'medium' | 'small';\r\n\r\n/**\r\n * Size configuration mapping to ensure minimum sizes and clear space\r\n * Minimum sizes are enforced to maintain logo clarity and brand guidelines\r\n */\r\nconst SIZE_CONFIG: Record<FlipdishLogoSize, { minWidth: number; minHeight: number }> = {\r\n  small: {\r\n    minWidth: 120,\r\n    minHeight: 32,\r\n  },\r\n  medium: {\r\n    minWidth: 180,\r\n    minHeight: 48,\r\n  },\r\n  large: {\r\n    minWidth: 240,\r\n    minHeight: 64,\r\n  },\r\n};\r\n\r\n/**\r\n * Asset mapping for different variants and themes\r\n */\r\nconst ASSET_MAP: Record<FlipdishLogoVariant, { light: string; dark: string }> = {\r\n  default: {\r\n    light: flipdishLogo,\r\n    dark: flipdishLogoDark,\r\n  },\r\n  icon: {\r\n    light: flipdishIcon,\r\n    dark: flipdishIconDark,\r\n  },\r\n  poweredBy: {\r\n    light: flipdishPoweredBy,\r\n    dark: flipdishPoweredByDark,\r\n  },\r\n};\r\n\r\nexport interface FlipdishLogoProps {\r\n  /**\r\n   * Logo variant to display\r\n   * - \"default\": Full Flipdish logo\r\n   * - \"icon\": Flipdish icon only\r\n   * - \"poweredBy\": \"Powered by Flipdish\" logo\r\n   */\r\n  variant?: FlipdishLogoVariant;\r\n  /**\r\n   * Theme variant for the logo\r\n   * - \"light\": Light theme logo (for dark backgrounds)\r\n   * - \"dark\": Dark theme logo (for light backgrounds)\r\n   * - \"auto\": Automatically selects based on current theme context\r\n   *\r\n   * @default \"auto\"\r\n   */\r\n  theme?: FlipdishLogoTheme;\r\n  /**\r\n   * Size of the logo\r\n   * Each size enforces minimum dimensions and clear space\r\n   *\r\n   * @default \"medium\"\r\n   */\r\n  size?: FlipdishLogoSize;\r\n  /**\r\n   * Accessible label for screen readers\r\n   * Maps to the image's alt attribute\r\n   */\r\n  ariaLabel: string;\r\n  /**\r\n   * Additional CSS class name\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Test ID for testing purposes\r\n   */\r\n  fdKey?: string;\r\n}\r\n\r\ninterface StyledContainerProps {\r\n  size: FlipdishLogoSize;\r\n}\r\n\r\nconst StyledContainer = styled('div', {\r\n  shouldForwardProp: (prop) => prop !== 'size',\r\n})<StyledContainerProps & { 'data-fd'?: string }>(({ theme, size }) => {\r\n  const config = SIZE_CONFIG[size];\r\n  // MUI spacing: spacing(1) = 8px, spacing(1.5) = 12px, spacing(2) = 16px\r\n  const paddingMap: Record<FlipdishLogoSize, number> = {\r\n    small: 1,\r\n    medium: 1.5,\r\n    large: 2,\r\n  };\r\n\r\n  return {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: theme.spacing(paddingMap[size]),\r\n    minWidth: `${config.minWidth}px`,\r\n    minHeight: `${config.minHeight}px`,\r\n    // Ensure pixel-snapped rendering for crisp edges\r\n    imageRendering: 'crisp-edges',\r\n    // Prevent layout shifts\r\n    contain: 'layout',\r\n  };\r\n});\r\n\r\ninterface StyledImageProps {\r\n  size: FlipdishLogoSize;\r\n  variant: FlipdishLogoVariant;\r\n}\r\n\r\nconst StyledImage = styled('img', {\r\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'variant',\r\n})<StyledImageProps>(({ size, variant }) => {\r\n  // Base dimensions for each variant (medium size)\r\n  const variantDimensions = {\r\n    icon: {\r\n      width: 3.58538,\r\n      height: 3,\r\n      aspectRatio: '57.37/48.00',\r\n    },\r\n    default: {\r\n      width: 10.16581,\r\n      height: 3,\r\n      aspectRatio: '162.65/48.00',\r\n    },\r\n    poweredBy: {\r\n      width: 9.42856,\r\n      height: 3,\r\n      aspectRatio: '150.86/48.00',\r\n    },\r\n  };\r\n\r\n  // Size scaling factors\r\n  const sizeScale: Record<FlipdishLogoSize, number> = {\r\n    small: 0.67, // ~2/3 of medium\r\n    medium: 1,\r\n    large: 1.33, // ~4/3 of medium\r\n  };\r\n\r\n  const scale = sizeScale[size];\r\n  const variantDims = variantDimensions[variant];\r\n\r\n  return {\r\n    // Prevent distortion\r\n    objectFit: 'contain',\r\n    // Ensure pixel-snapped rendering\r\n    imageRendering: 'crisp-edges',\r\n    // Variant-specific dimensions scaled by size\r\n    width: `${variantDims.width * scale}rem`,\r\n    height: `${variantDims.height * scale}rem`,\r\n    aspectRatio: variantDims.aspectRatio,\r\n    minWidth: `${variantDims.width * scale}rem`,\r\n    minHeight: `${variantDims.height * scale}rem`,\r\n    maxWidth: '100%',\r\n    maxHeight: '100%',\r\n  };\r\n});\r\n\r\n/**\r\n * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,\r\n * themes, and sizes.\r\n *\r\n * **Design Guidelines:**\r\n * - Respects clear space and minimum sizes for each variant\r\n * - Preserves intrinsic logo aspect ratios\r\n * - Supports both light and dark themes\r\n *\r\n * **Consumer Responsibilities:**\r\n * - Ensure logos are placed on backgrounds with sufficient contrast\r\n * - Use \"light\" theme logos on dark backgrounds\r\n * - Use \"dark\" theme logos on light backgrounds\r\n * - When using \"auto\" theme, ensure the component is within a themed context\r\n *\r\n * **Minimum Sizes:**\r\n * - Small: 120x32px minimum\r\n * - Medium: 180x48px minimum\r\n * - Large: 240x64px minimum\r\n *\r\n * @example\r\n * ```tsx\r\n * // Default usage with auto theme\r\n * <FlipdishLogo variant=\"default\" ariaLabel=\"Flipdish logo\" />\r\n *\r\n * // Explicit theme for dark background\r\n * <FlipdishLogo variant=\"icon\" theme=\"light\" size=\"large\" ariaLabel=\"Flipdish icon\" />\r\n *\r\n * // Powered by variant\r\n * <FlipdishLogo variant=\"poweredBy\" theme=\"dark\" ariaLabel=\"Powered by Flipdish\" />\r\n * ```\r\n */\r\nconst FlipdishLogo = ({\r\n  variant = 'default',\r\n  theme: themeProp = 'auto',\r\n  size = 'medium',\r\n  ariaLabel,\r\n  className,\r\n  fdKey,\r\n}: FlipdishLogoProps): JSX.Element => {\r\n  const theme = useTheme();\r\n  const actualTheme = themeProp === 'auto' ? (theme.palette.mode === 'dark' ? 'dark' : 'light') : themeProp;\r\n  const assets = ASSET_MAP[variant];\r\n  const src = actualTheme === 'dark' ? assets.dark : assets.light;\r\n\r\n  return (\r\n    <StyledContainer\r\n      className={className}\r\n      data-fd={fdKey}\r\n      size={size}\r\n    >\r\n      <StyledImage\r\n        alt={ariaLabel}\r\n        role=\"img\"\r\n        size={size}\r\n        src={src}\r\n        variant={variant}\r\n      />\r\n    </StyledContainer>\r\n  );\r\n};\r\n\r\nFlipdishLogo.displayName = 'FlipdishLogo';\r\n\r\nexport { FlipdishLogo };\r\n"],"names":["SIZE_CONFIG","small","minWidth","minHeight","medium","large","ASSET_MAP","default","light","flipdishLogo","dark","flipdishLogoDark","icon","flipdishIcon","flipdishIconDark","poweredBy","flipdishPoweredBy","flipdishPoweredByDark","StyledContainer","styled","shouldForwardProp","prop","theme","size","config","display","alignItems","justifyContent","padding","spacing","imageRendering","contain","StyledImage","variant","scale","variantDims","width","height","aspectRatio","objectFit","maxWidth","maxHeight","FlipdishLogo","themeProp","ariaLabel","className","fdKey","useTheme","actualTheme","palette","mode","assets","src","_jsx","alt","role","displayName"],"mappings":"sgBAkBA,MAAMA,EAAiF,CACrFC,MAAO,CACLC,SAAU,IACVC,UAAW,IAEbC,OAAQ,CACNF,SAAU,IACVC,UAAW,IAEbE,MAAO,CACLH,SAAU,IACVC,UAAW,KAOTG,EAA0E,CAC9EC,QAAS,CACPC,MAAOC,EACPC,KAAMC,GAERC,KAAM,CACJJ,MAAOK,EACPH,KAAMI,GAERC,UAAW,CACTP,MAAOQ,EACPN,KAAMO,IA+CJC,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,GAAkB,SAATA,GADPF,EAE0B,EAAGG,QAAOC,WAC1D,MAAMC,EAASxB,EAAYuB,GAQ3B,MAAO,CACLE,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChBC,QAASN,EAAMO,QAVoC,CACnD5B,MAAO,EACPG,OAAQ,IACRC,MAAO,GAO2BkB,IAClCrB,SAAU,GAAGsB,EAAOtB,aACpBC,UAAW,GAAGqB,EAAOrB,cAErB2B,eAAgB,cAEhBC,QAAS,aASPC,EAAcb,EAAAA,OAAO,MAAO,CAChCC,kBAAoBC,GAAkB,SAATA,GAA4B,YAATA,GAD9BF,EAEC,EAAGI,OAAMU,cAE5B,MAyBMC,EAN8C,CAClDjC,MAAO,IACPG,OAAQ,EACRC,MAAO,MAGekB,GAClBY,EA1BoB,CACxBvB,KAAM,CACJwB,MAAO,QACPC,OAAQ,EACRC,YAAa,eAEf/B,QAAS,CACP6B,MAAO,SACPC,OAAQ,EACRC,YAAa,gBAEfvB,UAAW,CACTqB,MAAO,QACPC,OAAQ,EACRC,YAAa,iBAYqBL,GAEtC,MAAO,CAELM,UAAW,UAEXT,eAAgB,cAEhBM,MAAUD,EAAYC,MAAQF,EAAvB,MACPG,OAAWF,EAAYE,OAASH,EAAxB,MACRI,YAAaH,EAAYG,YACzBpC,SAAaiC,EAAYC,MAAQF,EAAvB,MACV/B,UAAcgC,EAAYE,OAASH,EAAxB,MACXM,SAAU,OACVC,UAAW,WAoCTC,EAAe,EACnBT,UAAU,UACVX,MAAOqB,EAAY,OACnBpB,OAAO,SACPqB,YACAC,YACAC,YAEA,MAAMxB,EAAQyB,IACRC,EAA4B,SAAdL,EAA+C,SAAvBrB,EAAM2B,QAAQC,KAAkB,OAAS,QAAWP,EAC1FQ,EAAS7C,EAAU2B,GACnBmB,EAAsB,SAAhBJ,EAAyBG,EAAOzC,KAAOyC,EAAO3C,MAE1D,OACE6C,MAACnC,EAAe,CACd2B,UAAWA,EAAS,UACXC,EACTvB,KAAMA,WAEN8B,EAAAA,IAACrB,GACCsB,IAAKV,EACLW,KAAK,MACLhC,KAAMA,EACN6B,IAAKA,EACLnB,QAASA,OAMjBS,EAAac,YAAc"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/FlipdishLogo/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport flipdishIcon from '../../../assets/images/flipdish-icon.svg';\nimport flipdishIconDark from '../../../assets/images/flipdish-icon-dark.svg';\nimport flipdishLogo from '../../../assets/images/flipdish-logo.svg';\nimport flipdishLogoDark from '../../../assets/images/flipdish-logo-dark.svg';\nimport flipdishPoweredBy from '../../../assets/images/flipdish-powered-by.svg';\nimport flipdishPoweredByDark from '../../../assets/images/flipdish-powered-by-dark.svg';\n\nexport type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';\nexport type FlipdishLogoTheme = 'auto' | 'dark' | 'light';\nexport type FlipdishLogoSize = 'large' | 'medium' | 'small';\n\n/**\n * Size configuration mapping to ensure minimum sizes and clear space\n * Minimum sizes are enforced to maintain logo clarity and brand guidelines\n */\nconst SIZE_CONFIG: Record<FlipdishLogoSize, { minWidth: number; minHeight: number }> = {\n  small: {\n    minWidth: 120,\n    minHeight: 32,\n  },\n  medium: {\n    minWidth: 180,\n    minHeight: 48,\n  },\n  large: {\n    minWidth: 240,\n    minHeight: 64,\n  },\n};\n\n/**\n * Asset mapping for different variants and themes\n */\nconst ASSET_MAP: Record<FlipdishLogoVariant, { light: string; dark: string }> = {\n  default: {\n    light: flipdishLogo,\n    dark: flipdishLogoDark,\n  },\n  icon: {\n    light: flipdishIcon,\n    dark: flipdishIconDark,\n  },\n  poweredBy: {\n    light: flipdishPoweredBy,\n    dark: flipdishPoweredByDark,\n  },\n};\n\nexport interface FlipdishLogoProps {\n  /**\n   * Logo variant to display\n   * - \"default\": Full Flipdish logo\n   * - \"icon\": Flipdish icon only\n   * - \"poweredBy\": \"Powered by Flipdish\" logo\n   */\n  variant?: FlipdishLogoVariant;\n  /**\n   * Theme variant for the logo\n   * - \"light\": Light theme logo (for dark backgrounds)\n   * - \"dark\": Dark theme logo (for light backgrounds)\n   * - \"auto\": Automatically selects based on current theme context\n   *\n   * @default \"auto\"\n   */\n  theme?: FlipdishLogoTheme;\n  /**\n   * Size of the logo\n   * Each size enforces minimum dimensions and clear space\n   *\n   * @default \"medium\"\n   */\n  size?: FlipdishLogoSize;\n  /**\n   * Accessible label for screen readers\n   * Maps to the image's alt attribute\n   */\n  ariaLabel: string;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Test ID for testing purposes\n   */\n  fdKey?: string;\n}\n\ninterface StyledContainerProps {\n  size: FlipdishLogoSize;\n}\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<StyledContainerProps & { 'data-fd'?: string }>(({ theme, size }) => {\n  const config = SIZE_CONFIG[size];\n  // MUI spacing: spacing(1) = 8px, spacing(1.5) = 12px, spacing(2) = 16px\n  const paddingMap: Record<FlipdishLogoSize, number> = {\n    small: 1,\n    medium: 1.5,\n    large: 2,\n  };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: theme.spacing(paddingMap[size]),\n    minWidth: `${config.minWidth}px`,\n    minHeight: `${config.minHeight}px`,\n    // Ensure pixel-snapped rendering for crisp edges\n    imageRendering: 'crisp-edges',\n    // Prevent layout shifts\n    contain: 'layout',\n  };\n});\n\ninterface StyledImageProps {\n  size: FlipdishLogoSize;\n  variant: FlipdishLogoVariant;\n}\n\nconst StyledImage = styled('img', {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'variant',\n})<StyledImageProps>(({ size, variant }) => {\n  // Base dimensions for each variant (medium size)\n  const variantDimensions = {\n    icon: {\n      width: 3.58538,\n      height: 3,\n      aspectRatio: '57.37/48.00',\n    },\n    default: {\n      width: 10.16581,\n      height: 3,\n      aspectRatio: '162.65/48.00',\n    },\n    poweredBy: {\n      width: 9.42856,\n      height: 3,\n      aspectRatio: '150.86/48.00',\n    },\n  };\n\n  // Size scaling factors\n  const sizeScale: Record<FlipdishLogoSize, number> = {\n    small: 0.67, // ~2/3 of medium\n    medium: 1,\n    large: 1.33, // ~4/3 of medium\n  };\n\n  const scale = sizeScale[size];\n  const variantDims = variantDimensions[variant];\n\n  return {\n    // Prevent distortion\n    objectFit: 'contain',\n    // Ensure pixel-snapped rendering\n    imageRendering: 'crisp-edges',\n    // Variant-specific dimensions scaled by size\n    width: `${variantDims.width * scale}rem`,\n    height: `${variantDims.height * scale}rem`,\n    aspectRatio: variantDims.aspectRatio,\n    minWidth: `${variantDims.width * scale}rem`,\n    minHeight: `${variantDims.height * scale}rem`,\n    maxWidth: '100%',\n    maxHeight: '100%',\n  };\n});\n\n/**\n * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,\n * themes, and sizes.\n *\n * **Design Guidelines:**\n * - Respects clear space and minimum sizes for each variant\n * - Preserves intrinsic logo aspect ratios\n * - Supports both light and dark themes\n *\n * **Consumer Responsibilities:**\n * - Ensure logos are placed on backgrounds with sufficient contrast\n * - Use \"light\" theme logos on dark backgrounds\n * - Use \"dark\" theme logos on light backgrounds\n * - When using \"auto\" theme, ensure the component is within a themed context\n *\n * **Minimum Sizes:**\n * - Small: 120x32px minimum\n * - Medium: 180x48px minimum\n * - Large: 240x64px minimum\n *\n * @example\n * ```tsx\n * // Default usage with auto theme\n * <FlipdishLogo variant=\"default\" ariaLabel=\"Flipdish logo\" />\n *\n * // Explicit theme for dark background\n * <FlipdishLogo variant=\"icon\" theme=\"light\" size=\"large\" ariaLabel=\"Flipdish icon\" />\n *\n * // Powered by variant\n * <FlipdishLogo variant=\"poweredBy\" theme=\"dark\" ariaLabel=\"Powered by Flipdish\" />\n * ```\n */\nconst FlipdishLogo = ({\n  variant = 'default',\n  theme: themeProp = 'auto',\n  size = 'medium',\n  ariaLabel,\n  className,\n  fdKey,\n}: FlipdishLogoProps): JSX.Element => {\n  const theme = useTheme();\n  const actualTheme = themeProp === 'auto' ? (theme.palette.mode === 'dark' ? 'dark' : 'light') : themeProp;\n  const assets = ASSET_MAP[variant];\n  const src = actualTheme === 'dark' ? assets.dark : assets.light;\n\n  return (\n    <StyledContainer className={className} data-fd={fdKey} size={size}>\n      <StyledImage alt={ariaLabel} role=\"img\" size={size} src={src} variant={variant} />\n    </StyledContainer>\n  );\n};\n\nFlipdishLogo.displayName = 'FlipdishLogo';\n\nexport { FlipdishLogo };\n"],"names":["SIZE_CONFIG","small","minWidth","minHeight","medium","large","ASSET_MAP","default","light","flipdishLogo","dark","flipdishLogoDark","icon","flipdishIcon","flipdishIconDark","poweredBy","flipdishPoweredBy","flipdishPoweredByDark","StyledContainer","styled","shouldForwardProp","prop","theme","size","config","display","alignItems","justifyContent","padding","spacing","imageRendering","contain","StyledImage","variant","scale","variantDims","width","height","aspectRatio","objectFit","maxWidth","maxHeight","FlipdishLogo","themeProp","ariaLabel","className","fdKey","useTheme","actualTheme","palette","mode","assets","src","_jsx","alt","role","displayName"],"mappings":"sgBAkBA,MAAMA,EAAiF,CACrFC,MAAO,CACLC,SAAU,IACVC,UAAW,IAEbC,OAAQ,CACNF,SAAU,IACVC,UAAW,IAEbE,MAAO,CACLH,SAAU,IACVC,UAAW,KAOTG,EAA0E,CAC9EC,QAAS,CACPC,MAAOC,EACPC,KAAMC,GAERC,KAAM,CACJJ,MAAOK,EACPH,KAAMI,GAERC,UAAW,CACTP,MAAOQ,EACPN,KAAMO,IA+CJC,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,GAAkB,SAATA,GADPF,CAE0B,EAAGG,QAAOC,WAC1D,MAAMC,EAASxB,EAAYuB,GAQ3B,MAAO,CACLE,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChBC,QAASN,EAAMO,QAVoC,CACnD5B,MAAO,EACPG,OAAQ,IACRC,MAAO,GAO2BkB,IAClCrB,SAAU,GAAGsB,EAAOtB,aACpBC,UAAW,GAAGqB,EAAOrB,cAErB2B,eAAgB,cAEhBC,QAAS,YASPC,EAAcb,EAAAA,OAAO,MAAO,CAChCC,kBAAoBC,GAAkB,SAATA,GAA4B,YAATA,GAD9BF,CAEC,EAAGI,OAAMU,cAE5B,MAyBMC,EAN8C,CAClDjC,MAAO,IACPG,OAAQ,EACRC,MAAO,MAGekB,GAClBY,EA1BoB,CACxBvB,KAAM,CACJwB,MAAO,QACPC,OAAQ,EACRC,YAAa,eAEf/B,QAAS,CACP6B,MAAO,SACPC,OAAQ,EACRC,YAAa,gBAEfvB,UAAW,CACTqB,MAAO,QACPC,OAAQ,EACRC,YAAa,iBAYqBL,GAEtC,MAAO,CAELM,UAAW,UAEXT,eAAgB,cAEhBM,MAAUD,EAAYC,MAAQF,EAAvB,MACPG,OAAWF,EAAYE,OAASH,EAAxB,MACRI,YAAaH,EAAYG,YACzBpC,SAAaiC,EAAYC,MAAQF,EAAvB,MACV/B,UAAcgC,EAAYE,OAASH,EAAxB,MACXM,SAAU,OACVC,UAAW,UAoCTC,EAAe,EACnBT,UAAU,UACVX,MAAOqB,EAAY,OACnBpB,OAAO,SACPqB,YACAC,YACAC,YAEA,MAAMxB,EAAQyB,IACRC,EAA4B,SAAdL,EAA+C,SAAvBrB,EAAM2B,QAAQC,KAAkB,OAAS,QAAWP,EAC1FQ,EAAS7C,EAAU2B,GACnBmB,EAAsB,SAAhBJ,EAAyBG,EAAOzC,KAAOyC,EAAO3C,MAE1D,OACE6C,MAACnC,EAAe,CAAC2B,UAAWA,EAAS,UAAWC,EAAOvB,KAAMA,WAC3D8B,EAAAA,IAACrB,GAAYsB,IAAKV,EAAWW,KAAK,MAAMhC,KAAMA,EAAM6B,IAAKA,EAAKnB,QAASA,OAK7ES,EAAac,YAAc"}

package/dist/components/atoms/FlipdishLogo/index.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import t from"@mui/material/styles/useTheme";import s from"../../../assets/images/flipdish-icon.svg.js";import a from"../../../assets/images/flipdish-icon-dark.svg.js";import m from"../../../assets/images/flipdish-logo.svg.js";import r from"../../../assets/images/flipdish-logo-dark.svg.js";import d from"../../../assets/images/flipdish-powered-by.svg.js";import o from"../../../assets/images/flipdish-powered-by-dark.svg.js";const h={small:{minWidth:120,minHeight:32},medium:{minWidth:180,minHeight:48},large:{minWidth:240,minHeight:64}},g={default:{light:m,dark:r},icon:{light:s,dark:a},poweredBy:{light:d,dark:o}},n=e("div",{shouldForwardProp:i=>"size"!==i})((({theme:i,size:e})=>{const t=h[e];return{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:i.spacing({small:1,medium:1.5,large:2}[e]),minWidth:`${t.minWidth}px`,minHeight:`${t.minHeight}px`,imageRendering:"crisp-edges",contain:"layout"}})),l=e("img",{shouldForwardProp:i=>"size"!==i&&"variant"!==i})((({size:i,variant:e})=>{const t={small:.67,medium:1,large:1.33}[i],s={icon:{width:3.58538,height:3,aspectRatio:"57.37/48.00"},default:{width:10.16581,height:3,aspectRatio:"162.65/48.00"},poweredBy:{width:9.42856,height:3,aspectRatio:"150.86/48.00"}}[e];return{objectFit:"contain",imageRendering:"crisp-edges",width:s.width*t+"rem",height:s.height*t+"rem",aspectRatio:s.aspectRatio,minWidth:s.width*t+"rem",minHeight:s.height*t+"rem",maxWidth:"100%",maxHeight:"100%"}})),p=({variant:e="default",theme:s="auto",size:a="medium",ariaLabel:m,className:r,fdKey:d})=>{const o=t(),h="auto"===s?"dark"===o.palette.mode?"dark":"light":s,p=g[e],c="dark"===h?p.dark:p.light;return i(n,{className:r,"data-fd":d,size:a,children:i(l,{alt:m,role:"img",size:a,src:c,variant:e})})};p.displayName="FlipdishLogo";export{p as FlipdishLogo};
+import{jsx as i}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import t from"@mui/material/styles/useTheme";import s from"../../../assets/images/flipdish-icon.svg.js";import a from"../../../assets/images/flipdish-icon-dark.svg.js";import m from"../../../assets/images/flipdish-logo.svg.js";import r from"../../../assets/images/flipdish-logo-dark.svg.js";import d from"../../../assets/images/flipdish-powered-by.svg.js";import o from"../../../assets/images/flipdish-powered-by-dark.svg.js";const h={small:{minWidth:120,minHeight:32},medium:{minWidth:180,minHeight:48},large:{minWidth:240,minHeight:64}},g={default:{light:m,dark:r},icon:{light:s,dark:a},poweredBy:{light:d,dark:o}},n=e("div",{shouldForwardProp:i=>"size"!==i})(({theme:i,size:e})=>{const t=h[e];return{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:i.spacing({small:1,medium:1.5,large:2}[e]),minWidth:`${t.minWidth}px`,minHeight:`${t.minHeight}px`,imageRendering:"crisp-edges",contain:"layout"}}),l=e("img",{shouldForwardProp:i=>"size"!==i&&"variant"!==i})(({size:i,variant:e})=>{const t={small:.67,medium:1,large:1.33}[i],s={icon:{width:3.58538,height:3,aspectRatio:"57.37/48.00"},default:{width:10.16581,height:3,aspectRatio:"162.65/48.00"},poweredBy:{width:9.42856,height:3,aspectRatio:"150.86/48.00"}}[e];return{objectFit:"contain",imageRendering:"crisp-edges",width:s.width*t+"rem",height:s.height*t+"rem",aspectRatio:s.aspectRatio,minWidth:s.width*t+"rem",minHeight:s.height*t+"rem",maxWidth:"100%",maxHeight:"100%"}}),p=({variant:e="default",theme:s="auto",size:a="medium",ariaLabel:m,className:r,fdKey:d})=>{const o=t(),h="auto"===s?"dark"===o.palette.mode?"dark":"light":s,p=g[e],c="dark"===h?p.dark:p.light;return i(n,{className:r,"data-fd":d,size:a,children:i(l,{alt:m,role:"img",size:a,src:c,variant:e})})};p.displayName="FlipdishLogo";export{p as FlipdishLogo};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/FlipdishLogo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/FlipdishLogo/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\r\nimport useTheme from '@mui/material/styles/useTheme';\r\n\r\nimport flipdishIcon from '../../../assets/images/flipdish-icon.svg';\r\nimport flipdishIconDark from '../../../assets/images/flipdish-icon-dark.svg';\r\nimport flipdishLogo from '../../../assets/images/flipdish-logo.svg';\r\nimport flipdishLogoDark from '../../../assets/images/flipdish-logo-dark.svg';\r\nimport flipdishPoweredBy from '../../../assets/images/flipdish-powered-by.svg';\r\nimport flipdishPoweredByDark from '../../../assets/images/flipdish-powered-by-dark.svg';\r\n\r\nexport type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';\r\nexport type FlipdishLogoTheme = 'auto' | 'dark' | 'light';\r\nexport type FlipdishLogoSize = 'large' | 'medium' | 'small';\r\n\r\n/**\r\n * Size configuration mapping to ensure minimum sizes and clear space\r\n * Minimum sizes are enforced to maintain logo clarity and brand guidelines\r\n */\r\nconst SIZE_CONFIG: Record<FlipdishLogoSize, { minWidth: number; minHeight: number }> = {\r\n  small: {\r\n    minWidth: 120,\r\n    minHeight: 32,\r\n  },\r\n  medium: {\r\n    minWidth: 180,\r\n    minHeight: 48,\r\n  },\r\n  large: {\r\n    minWidth: 240,\r\n    minHeight: 64,\r\n  },\r\n};\r\n\r\n/**\r\n * Asset mapping for different variants and themes\r\n */\r\nconst ASSET_MAP: Record<FlipdishLogoVariant, { light: string; dark: string }> = {\r\n  default: {\r\n    light: flipdishLogo,\r\n    dark: flipdishLogoDark,\r\n  },\r\n  icon: {\r\n    light: flipdishIcon,\r\n    dark: flipdishIconDark,\r\n  },\r\n  poweredBy: {\r\n    light: flipdishPoweredBy,\r\n    dark: flipdishPoweredByDark,\r\n  },\r\n};\r\n\r\nexport interface FlipdishLogoProps {\r\n  /**\r\n   * Logo variant to display\r\n   * - \"default\": Full Flipdish logo\r\n   * - \"icon\": Flipdish icon only\r\n   * - \"poweredBy\": \"Powered by Flipdish\" logo\r\n   */\r\n  variant?: FlipdishLogoVariant;\r\n  /**\r\n   * Theme variant for the logo\r\n   * - \"light\": Light theme logo (for dark backgrounds)\r\n   * - \"dark\": Dark theme logo (for light backgrounds)\r\n   * - \"auto\": Automatically selects based on current theme context\r\n   *\r\n   * @default \"auto\"\r\n   */\r\n  theme?: FlipdishLogoTheme;\r\n  /**\r\n   * Size of the logo\r\n   * Each size enforces minimum dimensions and clear space\r\n   *\r\n   * @default \"medium\"\r\n   */\r\n  size?: FlipdishLogoSize;\r\n  /**\r\n   * Accessible label for screen readers\r\n   * Maps to the image's alt attribute\r\n   */\r\n  ariaLabel: string;\r\n  /**\r\n   * Additional CSS class name\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Test ID for testing purposes\r\n   */\r\n  fdKey?: string;\r\n}\r\n\r\ninterface StyledContainerProps {\r\n  size: FlipdishLogoSize;\r\n}\r\n\r\nconst StyledContainer = styled('div', {\r\n  shouldForwardProp: (prop) => prop !== 'size',\r\n})<StyledContainerProps & { 'data-fd'?: string }>(({ theme, size }) => {\r\n  const config = SIZE_CONFIG[size];\r\n  // MUI spacing: spacing(1) = 8px, spacing(1.5) = 12px, spacing(2) = 16px\r\n  const paddingMap: Record<FlipdishLogoSize, number> = {\r\n    small: 1,\r\n    medium: 1.5,\r\n    large: 2,\r\n  };\r\n\r\n  return {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: theme.spacing(paddingMap[size]),\r\n    minWidth: `${config.minWidth}px`,\r\n    minHeight: `${config.minHeight}px`,\r\n    // Ensure pixel-snapped rendering for crisp edges\r\n    imageRendering: 'crisp-edges',\r\n    // Prevent layout shifts\r\n    contain: 'layout',\r\n  };\r\n});\r\n\r\ninterface StyledImageProps {\r\n  size: FlipdishLogoSize;\r\n  variant: FlipdishLogoVariant;\r\n}\r\n\r\nconst StyledImage = styled('img', {\r\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'variant',\r\n})<StyledImageProps>(({ size, variant }) => {\r\n  // Base dimensions for each variant (medium size)\r\n  const variantDimensions = {\r\n    icon: {\r\n      width: 3.58538,\r\n      height: 3,\r\n      aspectRatio: '57.37/48.00',\r\n    },\r\n    default: {\r\n      width: 10.16581,\r\n      height: 3,\r\n      aspectRatio: '162.65/48.00',\r\n    },\r\n    poweredBy: {\r\n      width: 9.42856,\r\n      height: 3,\r\n      aspectRatio: '150.86/48.00',\r\n    },\r\n  };\r\n\r\n  // Size scaling factors\r\n  const sizeScale: Record<FlipdishLogoSize, number> = {\r\n    small: 0.67, // ~2/3 of medium\r\n    medium: 1,\r\n    large: 1.33, // ~4/3 of medium\r\n  };\r\n\r\n  const scale = sizeScale[size];\r\n  const variantDims = variantDimensions[variant];\r\n\r\n  return {\r\n    // Prevent distortion\r\n    objectFit: 'contain',\r\n    // Ensure pixel-snapped rendering\r\n    imageRendering: 'crisp-edges',\r\n    // Variant-specific dimensions scaled by size\r\n    width: `${variantDims.width * scale}rem`,\r\n    height: `${variantDims.height * scale}rem`,\r\n    aspectRatio: variantDims.aspectRatio,\r\n    minWidth: `${variantDims.width * scale}rem`,\r\n    minHeight: `${variantDims.height * scale}rem`,\r\n    maxWidth: '100%',\r\n    maxHeight: '100%',\r\n  };\r\n});\r\n\r\n/**\r\n * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,\r\n * themes, and sizes.\r\n *\r\n * **Design Guidelines:**\r\n * - Respects clear space and minimum sizes for each variant\r\n * - Preserves intrinsic logo aspect ratios\r\n * - Supports both light and dark themes\r\n *\r\n * **Consumer Responsibilities:**\r\n * - Ensure logos are placed on backgrounds with sufficient contrast\r\n * - Use \"light\" theme logos on dark backgrounds\r\n * - Use \"dark\" theme logos on light backgrounds\r\n * - When using \"auto\" theme, ensure the component is within a themed context\r\n *\r\n * **Minimum Sizes:**\r\n * - Small: 120x32px minimum\r\n * - Medium: 180x48px minimum\r\n * - Large: 240x64px minimum\r\n *\r\n * @example\r\n * ```tsx\r\n * // Default usage with auto theme\r\n * <FlipdishLogo variant=\"default\" ariaLabel=\"Flipdish logo\" />\r\n *\r\n * // Explicit theme for dark background\r\n * <FlipdishLogo variant=\"icon\" theme=\"light\" size=\"large\" ariaLabel=\"Flipdish icon\" />\r\n *\r\n * // Powered by variant\r\n * <FlipdishLogo variant=\"poweredBy\" theme=\"dark\" ariaLabel=\"Powered by Flipdish\" />\r\n * ```\r\n */\r\nconst FlipdishLogo = ({\r\n  variant = 'default',\r\n  theme: themeProp = 'auto',\r\n  size = 'medium',\r\n  ariaLabel,\r\n  className,\r\n  fdKey,\r\n}: FlipdishLogoProps): JSX.Element => {\r\n  const theme = useTheme();\r\n  const actualTheme = themeProp === 'auto' ? (theme.palette.mode === 'dark' ? 'dark' : 'light') : themeProp;\r\n  const assets = ASSET_MAP[variant];\r\n  const src = actualTheme === 'dark' ? assets.dark : assets.light;\r\n\r\n  return (\r\n    <StyledContainer\r\n      className={className}\r\n      data-fd={fdKey}\r\n      size={size}\r\n    >\r\n      <StyledImage\r\n        alt={ariaLabel}\r\n        role=\"img\"\r\n        size={size}\r\n        src={src}\r\n        variant={variant}\r\n      />\r\n    </StyledContainer>\r\n  );\r\n};\r\n\r\nFlipdishLogo.displayName = 'FlipdishLogo';\r\n\r\nexport { FlipdishLogo };\r\n"],"names":["SIZE_CONFIG","small","minWidth","minHeight","medium","large","ASSET_MAP","default","light","flipdishLogo","dark","flipdishLogoDark","icon","flipdishIcon","flipdishIconDark","poweredBy","flipdishPoweredBy","flipdishPoweredByDark","StyledContainer","styled","shouldForwardProp","prop","theme","size","config","display","alignItems","justifyContent","padding","spacing","imageRendering","contain","StyledImage","variant","scale","variantDims","width","height","aspectRatio","objectFit","maxWidth","maxHeight","FlipdishLogo","themeProp","ariaLabel","className","fdKey","useTheme","actualTheme","palette","mode","assets","src","_jsx","alt","role","displayName"],"mappings":"ggBAkBA,MAAMA,EAAiF,CACrFC,MAAO,CACLC,SAAU,IACVC,UAAW,IAEbC,OAAQ,CACNF,SAAU,IACVC,UAAW,IAEbE,MAAO,CACLH,SAAU,IACVC,UAAW,KAOTG,EAA0E,CAC9EC,QAAS,CACPC,MAAOC,EACPC,KAAMC,GAERC,KAAM,CACJJ,MAAOK,EACPH,KAAMI,GAERC,UAAW,CACTP,MAAOQ,EACPN,KAAMO,IA+CJC,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,SAATA,GADPF,EAE0B,EAAGG,QAAOC,WAC1D,MAAMC,EAASxB,EAAYuB,GAQ3B,MAAO,CACLE,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChBC,QAASN,EAAMO,QAVoC,CACnD5B,MAAO,EACPG,OAAQ,IACRC,MAAO,GAO2BkB,IAClCrB,SAAU,GAAGsB,EAAOtB,aACpBC,UAAW,GAAGqB,EAAOrB,cAErB2B,eAAgB,cAEhBC,QAAS,aASPC,EAAcb,EAAO,MAAO,CAChCC,kBAAoBC,GAAkB,SAATA,GAA4B,YAATA,GAD9BF,EAEC,EAAGI,OAAMU,cAE5B,MAyBMC,EAN8C,CAClDjC,MAAO,IACPG,OAAQ,EACRC,MAAO,MAGekB,GAClBY,EA1BoB,CACxBvB,KAAM,CACJwB,MAAO,QACPC,OAAQ,EACRC,YAAa,eAEf/B,QAAS,CACP6B,MAAO,SACPC,OAAQ,EACRC,YAAa,gBAEfvB,UAAW,CACTqB,MAAO,QACPC,OAAQ,EACRC,YAAa,iBAYqBL,GAEtC,MAAO,CAELM,UAAW,UAEXT,eAAgB,cAEhBM,MAAUD,EAAYC,MAAQF,EAAvB,MACPG,OAAWF,EAAYE,OAASH,EAAxB,MACRI,YAAaH,EAAYG,YACzBpC,SAAaiC,EAAYC,MAAQF,EAAvB,MACV/B,UAAcgC,EAAYE,OAASH,EAAxB,MACXM,SAAU,OACVC,UAAW,WAoCTC,EAAe,EACnBT,UAAU,UACVX,MAAOqB,EAAY,OACnBpB,OAAO,SACPqB,YACAC,YACAC,YAEA,MAAMxB,EAAQyB,IACRC,EAA4B,SAAdL,EAA+C,SAAvBrB,EAAM2B,QAAQC,KAAkB,OAAS,QAAWP,EAC1FQ,EAAS7C,EAAU2B,GACnBmB,EAAsB,SAAhBJ,EAAyBG,EAAOzC,KAAOyC,EAAO3C,MAE1D,OACE6C,EAACnC,EAAe,CACd2B,UAAWA,EAAS,UACXC,EACTvB,KAAMA,WAEN8B,EAACrB,GACCsB,IAAKV,EACLW,KAAK,MACLhC,KAAMA,EACN6B,IAAKA,EACLnB,QAASA,OAMjBS,EAAac,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/FlipdishLogo/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport flipdishIcon from '../../../assets/images/flipdish-icon.svg';\nimport flipdishIconDark from '../../../assets/images/flipdish-icon-dark.svg';\nimport flipdishLogo from '../../../assets/images/flipdish-logo.svg';\nimport flipdishLogoDark from '../../../assets/images/flipdish-logo-dark.svg';\nimport flipdishPoweredBy from '../../../assets/images/flipdish-powered-by.svg';\nimport flipdishPoweredByDark from '../../../assets/images/flipdish-powered-by-dark.svg';\n\nexport type FlipdishLogoVariant = 'default' | 'icon' | 'poweredBy';\nexport type FlipdishLogoTheme = 'auto' | 'dark' | 'light';\nexport type FlipdishLogoSize = 'large' | 'medium' | 'small';\n\n/**\n * Size configuration mapping to ensure minimum sizes and clear space\n * Minimum sizes are enforced to maintain logo clarity and brand guidelines\n */\nconst SIZE_CONFIG: Record<FlipdishLogoSize, { minWidth: number; minHeight: number }> = {\n  small: {\n    minWidth: 120,\n    minHeight: 32,\n  },\n  medium: {\n    minWidth: 180,\n    minHeight: 48,\n  },\n  large: {\n    minWidth: 240,\n    minHeight: 64,\n  },\n};\n\n/**\n * Asset mapping for different variants and themes\n */\nconst ASSET_MAP: Record<FlipdishLogoVariant, { light: string; dark: string }> = {\n  default: {\n    light: flipdishLogo,\n    dark: flipdishLogoDark,\n  },\n  icon: {\n    light: flipdishIcon,\n    dark: flipdishIconDark,\n  },\n  poweredBy: {\n    light: flipdishPoweredBy,\n    dark: flipdishPoweredByDark,\n  },\n};\n\nexport interface FlipdishLogoProps {\n  /**\n   * Logo variant to display\n   * - \"default\": Full Flipdish logo\n   * - \"icon\": Flipdish icon only\n   * - \"poweredBy\": \"Powered by Flipdish\" logo\n   */\n  variant?: FlipdishLogoVariant;\n  /**\n   * Theme variant for the logo\n   * - \"light\": Light theme logo (for dark backgrounds)\n   * - \"dark\": Dark theme logo (for light backgrounds)\n   * - \"auto\": Automatically selects based on current theme context\n   *\n   * @default \"auto\"\n   */\n  theme?: FlipdishLogoTheme;\n  /**\n   * Size of the logo\n   * Each size enforces minimum dimensions and clear space\n   *\n   * @default \"medium\"\n   */\n  size?: FlipdishLogoSize;\n  /**\n   * Accessible label for screen readers\n   * Maps to the image's alt attribute\n   */\n  ariaLabel: string;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Test ID for testing purposes\n   */\n  fdKey?: string;\n}\n\ninterface StyledContainerProps {\n  size: FlipdishLogoSize;\n}\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<StyledContainerProps & { 'data-fd'?: string }>(({ theme, size }) => {\n  const config = SIZE_CONFIG[size];\n  // MUI spacing: spacing(1) = 8px, spacing(1.5) = 12px, spacing(2) = 16px\n  const paddingMap: Record<FlipdishLogoSize, number> = {\n    small: 1,\n    medium: 1.5,\n    large: 2,\n  };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: theme.spacing(paddingMap[size]),\n    minWidth: `${config.minWidth}px`,\n    minHeight: `${config.minHeight}px`,\n    // Ensure pixel-snapped rendering for crisp edges\n    imageRendering: 'crisp-edges',\n    // Prevent layout shifts\n    contain: 'layout',\n  };\n});\n\ninterface StyledImageProps {\n  size: FlipdishLogoSize;\n  variant: FlipdishLogoVariant;\n}\n\nconst StyledImage = styled('img', {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'variant',\n})<StyledImageProps>(({ size, variant }) => {\n  // Base dimensions for each variant (medium size)\n  const variantDimensions = {\n    icon: {\n      width: 3.58538,\n      height: 3,\n      aspectRatio: '57.37/48.00',\n    },\n    default: {\n      width: 10.16581,\n      height: 3,\n      aspectRatio: '162.65/48.00',\n    },\n    poweredBy: {\n      width: 9.42856,\n      height: 3,\n      aspectRatio: '150.86/48.00',\n    },\n  };\n\n  // Size scaling factors\n  const sizeScale: Record<FlipdishLogoSize, number> = {\n    small: 0.67, // ~2/3 of medium\n    medium: 1,\n    large: 1.33, // ~4/3 of medium\n  };\n\n  const scale = sizeScale[size];\n  const variantDims = variantDimensions[variant];\n\n  return {\n    // Prevent distortion\n    objectFit: 'contain',\n    // Ensure pixel-snapped rendering\n    imageRendering: 'crisp-edges',\n    // Variant-specific dimensions scaled by size\n    width: `${variantDims.width * scale}rem`,\n    height: `${variantDims.height * scale}rem`,\n    aspectRatio: variantDims.aspectRatio,\n    minWidth: `${variantDims.width * scale}rem`,\n    minHeight: `${variantDims.height * scale}rem`,\n    maxWidth: '100%',\n    maxHeight: '100%',\n  };\n});\n\n/**\n * FlipdishLogo component displays the Flipdish company logo with support for multiple variants,\n * themes, and sizes.\n *\n * **Design Guidelines:**\n * - Respects clear space and minimum sizes for each variant\n * - Preserves intrinsic logo aspect ratios\n * - Supports both light and dark themes\n *\n * **Consumer Responsibilities:**\n * - Ensure logos are placed on backgrounds with sufficient contrast\n * - Use \"light\" theme logos on dark backgrounds\n * - Use \"dark\" theme logos on light backgrounds\n * - When using \"auto\" theme, ensure the component is within a themed context\n *\n * **Minimum Sizes:**\n * - Small: 120x32px minimum\n * - Medium: 180x48px minimum\n * - Large: 240x64px minimum\n *\n * @example\n * ```tsx\n * // Default usage with auto theme\n * <FlipdishLogo variant=\"default\" ariaLabel=\"Flipdish logo\" />\n *\n * // Explicit theme for dark background\n * <FlipdishLogo variant=\"icon\" theme=\"light\" size=\"large\" ariaLabel=\"Flipdish icon\" />\n *\n * // Powered by variant\n * <FlipdishLogo variant=\"poweredBy\" theme=\"dark\" ariaLabel=\"Powered by Flipdish\" />\n * ```\n */\nconst FlipdishLogo = ({\n  variant = 'default',\n  theme: themeProp = 'auto',\n  size = 'medium',\n  ariaLabel,\n  className,\n  fdKey,\n}: FlipdishLogoProps): JSX.Element => {\n  const theme = useTheme();\n  const actualTheme = themeProp === 'auto' ? (theme.palette.mode === 'dark' ? 'dark' : 'light') : themeProp;\n  const assets = ASSET_MAP[variant];\n  const src = actualTheme === 'dark' ? assets.dark : assets.light;\n\n  return (\n    <StyledContainer className={className} data-fd={fdKey} size={size}>\n      <StyledImage alt={ariaLabel} role=\"img\" size={size} src={src} variant={variant} />\n    </StyledContainer>\n  );\n};\n\nFlipdishLogo.displayName = 'FlipdishLogo';\n\nexport { FlipdishLogo };\n"],"names":["SIZE_CONFIG","small","minWidth","minHeight","medium","large","ASSET_MAP","default","light","flipdishLogo","dark","flipdishLogoDark","icon","flipdishIcon","flipdishIconDark","poweredBy","flipdishPoweredBy","flipdishPoweredByDark","StyledContainer","styled","shouldForwardProp","prop","theme","size","config","display","alignItems","justifyContent","padding","spacing","imageRendering","contain","StyledImage","variant","scale","variantDims","width","height","aspectRatio","objectFit","maxWidth","maxHeight","FlipdishLogo","themeProp","ariaLabel","className","fdKey","useTheme","actualTheme","palette","mode","assets","src","_jsx","alt","role","displayName"],"mappings":"ggBAkBA,MAAMA,EAAiF,CACrFC,MAAO,CACLC,SAAU,IACVC,UAAW,IAEbC,OAAQ,CACNF,SAAU,IACVC,UAAW,IAEbE,MAAO,CACLH,SAAU,IACVC,UAAW,KAOTG,EAA0E,CAC9EC,QAAS,CACPC,MAAOC,EACPC,KAAMC,GAERC,KAAM,CACJJ,MAAOK,EACPH,KAAMI,GAERC,UAAW,CACTP,MAAOQ,EACPN,KAAMO,IA+CJC,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,SAATA,GADPF,CAE0B,EAAGG,QAAOC,WAC1D,MAAMC,EAASxB,EAAYuB,GAQ3B,MAAO,CACLE,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChBC,QAASN,EAAMO,QAVoC,CACnD5B,MAAO,EACPG,OAAQ,IACRC,MAAO,GAO2BkB,IAClCrB,SAAU,GAAGsB,EAAOtB,aACpBC,UAAW,GAAGqB,EAAOrB,cAErB2B,eAAgB,cAEhBC,QAAS,YASPC,EAAcb,EAAO,MAAO,CAChCC,kBAAoBC,GAAkB,SAATA,GAA4B,YAATA,GAD9BF,CAEC,EAAGI,OAAMU,cAE5B,MAyBMC,EAN8C,CAClDjC,MAAO,IACPG,OAAQ,EACRC,MAAO,MAGekB,GAClBY,EA1BoB,CACxBvB,KAAM,CACJwB,MAAO,QACPC,OAAQ,EACRC,YAAa,eAEf/B,QAAS,CACP6B,MAAO,SACPC,OAAQ,EACRC,YAAa,gBAEfvB,UAAW,CACTqB,MAAO,QACPC,OAAQ,EACRC,YAAa,iBAYqBL,GAEtC,MAAO,CAELM,UAAW,UAEXT,eAAgB,cAEhBM,MAAUD,EAAYC,MAAQF,EAAvB,MACPG,OAAWF,EAAYE,OAASH,EAAxB,MACRI,YAAaH,EAAYG,YACzBpC,SAAaiC,EAAYC,MAAQF,EAAvB,MACV/B,UAAcgC,EAAYE,OAASH,EAAxB,MACXM,SAAU,OACVC,UAAW,UAoCTC,EAAe,EACnBT,UAAU,UACVX,MAAOqB,EAAY,OACnBpB,OAAO,SACPqB,YACAC,YACAC,YAEA,MAAMxB,EAAQyB,IACRC,EAA4B,SAAdL,EAA+C,SAAvBrB,EAAM2B,QAAQC,KAAkB,OAAS,QAAWP,EAC1FQ,EAAS7C,EAAU2B,GACnBmB,EAAsB,SAAhBJ,EAAyBG,EAAOzC,KAAOyC,EAAO3C,MAE1D,OACE6C,EAACnC,EAAe,CAAC2B,UAAWA,EAAS,UAAWC,EAAOvB,KAAMA,WAC3D8B,EAACrB,GAAYsB,IAAKV,EAAWW,KAAK,MAAMhC,KAAMA,EAAM6B,IAAKA,EAAKnB,QAASA,OAK7ES,EAAac,YAAc"}

package/dist/components/atoms/IconButton/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),n=require("../BadgeCount/index.cjs.js"),s=require("../BadgeDot/index.cjs.js"),r=require("@mui/material/Box"),o=require("./getIconButtonStyles.cjs.js");const d=a.styled(i,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i),n="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...a.default,overflow:"visible","&.Mui-disabled":{...a.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:n}}})),l=a.styled(r,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":a.hover,"[data-variant]:active:not(.Mui-disabled) > &":a.press}})),u=a.styled(n.BadgeCount,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),c=a.styled(s.BadgeDot,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=t.forwardRef((({badgeCount:t,badgeDot:i=!1,children:a,className:n,disabled:s=!1,fdKey:r,onClick:o,size:p="medium",tone:m="brand",variant:b="primary",...v},g)=>e.jsxs(d,{ref:g,disableRipple:!0,className:n,"data-fd":r,"data-tone":m,"data-variant":b,disabled:s,onClick:o,size:p,tone:m,variant:b,...v,children:[e.jsx(l,{tone:m,variant:b,children:a}),!!t&&e.jsx(u,{fdKey:"icon-button-badge-count",size:p,children:t}),i&&!t&&e.jsx(c,{fdKey:"icon-button-badge-dot",size:p})]})));p.displayName="IconButton",exports.IconButton=p,exports.default=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/IconButton"),a=require("@mui/material/styles"),n=require("../BadgeCount/index.cjs.js"),s=require("../BadgeDot/index.cjs.js"),r=require("@mui/material/Box"),o=require("./getIconButtonStyles.cjs.js");const d=a.styled(i,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})(({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i),n="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...a.default,overflow:"visible","&.Mui-disabled":{...a.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:n}}}),l=a.styled(r,{shouldForwardProp:e=>!["variant","tone"].includes(e)})(({theme:e,variant:t="primary",tone:i="brand"})=>{const a=o(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":a.hover,"[data-variant]:active:not(.Mui-disabled) > &":a.press}}),u=a.styled(n.BadgeCount,{shouldForwardProp:e=>!["size"].includes(e)})(({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"})),c=a.styled(s.BadgeDot,{shouldForwardProp:e=>!["size"].includes(e)})(({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"})),p=t.forwardRef(({badgeCount:t,badgeDot:i=!1,children:a,className:n,disabled:s=!1,fdKey:r,onClick:o,size:p="medium",tone:m="brand",variant:b="primary",...v},g)=>e.jsxs(d,{ref:g,disableRipple:!0,className:n,"data-fd":r,"data-tone":m,"data-variant":b,disabled:s,onClick:o,size:p,tone:m,variant:b,...v,children:[e.jsx(l,{tone:m,variant:b,children:a}),!!t&&e.jsx(u,{fdKey:"icon-button-badge-count",size:p,children:t}),i&&!t&&e.jsx(c,{fdKey:"icon-button-badge-dot",size:p})]}));p.displayName="IconButton",exports.IconButton=p,exports.default=p;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/IconButton/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"yVAoCA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAAA,OAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAAA,OAAO8B,aAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAAA,OAAOsC,WAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,EAAAA,YACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAAA,KAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAAAA,IAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAAAA,IAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAAAA,IAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,SAMxFQ,EAAWa,YAAc"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"yVAoCA,MAAMA,EAAmBC,EAAAA,OAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,CAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,MAKdQ,EAAYlB,EAAAA,OAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,CAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,SAIrDC,EAAmB7B,EAAAA,OAAO8B,aAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,CAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,UAGXY,EAAiBrC,EAAAA,OAAOsC,WAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,CAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,UAGJc,EAAaC,EAAAA,WACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAAA,KAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAAAA,IAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAAAA,IAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAAAA,IAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,QAMxFQ,EAAWa,YAAc"}

package/dist/components/atoms/IconButton/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import o from"@mui/material/IconButton";import{styled as a}from"@mui/material/styles";import{BadgeCount as n}from"../BadgeCount/index.js";import{BadgeDot as r}from"../BadgeDot/index.js";import s from"@mui/material/Box";import d from"./getIconButtonStyles.js";const l=a(o,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i),a="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...o.default,overflow:"visible","&.Mui-disabled":{...o.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:a}}})),m=a(s,{shouldForwardProp:e=>!["variant","tone"].includes(e)})((({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":o.hover,"[data-variant]:active:not(.Mui-disabled) > &":o.press}})),c=a(n,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),u=a(r,{shouldForwardProp:e=>!["size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"}))),p=i((({badgeCount:i,badgeDot:o=!1,children:a,className:n,disabled:r=!1,fdKey:s,onClick:d,size:p="medium",tone:b="brand",variant:f="primary",...v},g)=>e(l,{ref:g,disableRipple:!0,className:n,"data-fd":s,"data-tone":b,"data-variant":f,disabled:r,onClick:d,size:p,tone:b,variant:f,...v,children:[t(m,{tone:b,variant:f,children:a}),!!i&&t(c,{fdKey:"icon-button-badge-count",size:p,children:i}),o&&!i&&t(u,{fdKey:"icon-button-badge-dot",size:p})]})));p.displayName="IconButton";export{p as IconButton,p as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i}from"react";import o from"@mui/material/IconButton";import{styled as a}from"@mui/material/styles";import{BadgeCount as n}from"../BadgeCount/index.js";import{BadgeDot as r}from"../BadgeDot/index.js";import s from"@mui/material/Box";import d from"./getIconButtonStyles.js";const l=a(o,{shouldForwardProp:e=>!["variant","tone","badgeDot","badgeCount","fdKey"].includes(e)})(({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i),a="inverse"===i?e.palette.semantic.stroke["stroke-inverse-strong"]:e.palette.semantic.stroke["stroke-focus"];return{...o.default,overflow:"visible","&.Mui-disabled":{...o.disabled,overflow:"visible"},"&.Mui-focusVisible":{outlineColor:a}}}),m=a(s,{shouldForwardProp:e=>!["variant","tone"].includes(e)})(({theme:e,variant:t="primary",tone:i="brand"})=>{const o=d(e,t,i);return{alignItems:"center",borderRadius:"inherit",display:"flex",height:"100%",justifyContent:"center",overflow:"hidden",pointerEvents:"none",width:"100%","[data-variant]:hover:not(.Mui-disabled) > &":o.hover,"[data-variant]:active:not(.Mui-disabled) > &":o.press}}),c=a(n,{shouldForwardProp:e=>!["size"].includes(e)})(({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"})),u=a(r,{shouldForwardProp:e=>!["size"].includes(e)})(({theme:e,size:t})=>({position:"absolute",bottom:"small"===t?e.spacing(2.5):e.spacing(4),left:"small"===t?e.spacing(2.5):e.spacing(4),zIndex:1,pointerEvents:"none"})),p=i(({badgeCount:i,badgeDot:o=!1,children:a,className:n,disabled:r=!1,fdKey:s,onClick:d,size:p="medium",tone:b="brand",variant:f="primary",...v},g)=>e(l,{ref:g,disableRipple:!0,className:n,"data-fd":s,"data-tone":b,"data-variant":f,disabled:r,onClick:d,size:p,tone:b,variant:f,...v,children:[t(m,{tone:b,variant:f,children:a}),!!i&&t(c,{fdKey:"icon-button-badge-count",size:p,children:i}),o&&!i&&t(u,{fdKey:"icon-button-badge-dot",size:p})]}));p.displayName="IconButton";export{p as IconButton,p as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"wVAoCA,MAAMA,EAAmBC,EAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,EAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,OAKdQ,EAAYlB,EAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,EAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,UAIrDC,EAAmB7B,EAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,EAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGXY,EAAiBrC,EAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,EAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,WAGJc,EAAaC,GACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,SAMxFQ,EAAWa,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconButton/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport MuiIconButton, { type IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\n\nimport BadgeCount from '../BadgeCount';\nimport BadgeDot from '../BadgeDot';\nimport Box from '../Box';\nimport getIconButtonStyles, { type IconButtonTone, type IconButtonVariant } from './getIconButtonStyles';\n\n/**\n * Custom IconButton atom for Flipdish design system.\n * - icon: The icon to display (required, use local icon library)\n * - badgeDot: Show a small dot badge (optional)\n * - badgeCount: Show a count badge (optional)\n * - variant: Visual style (primary | secondary | tertiary)\n * - tone: Visual tone (brand | destructive | inverse | neutral)\n * - state: Visual state (default | disabled | focus | hover | press)\n * - aria-label: Accessibility label\n * - fdKey: Data attribute for testing/analytics\n * - ...rest: All other props are passed to MuiIconButton\n */\nexport interface IconButtonProps extends Omit<MuiIconButtonProps, 'color'> {\n  'aria-label': string;\n  badgeCount?: number;\n  badgeDot?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  fdKey?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  size?: 'medium' | 'small';\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) =>\n    !['variant', 'tone', 'badgeDot', 'badgeCount', 'fdKey'].includes(prop as string),\n})<{\n  tone?: IconButtonTone;\n  variant?: IconButtonVariant;\n  iconColor?: string;\n}>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n  const focusColor =\n    tone === 'inverse'\n      ? theme.palette.semantic.stroke['stroke-inverse-strong']\n      : theme.palette.semantic.stroke['stroke-focus'];\n\n  return {\n    ...styles.default,\n    overflow: 'visible', // Allow badges to overflow\n    '&.Mui-disabled': { ...styles.disabled, overflow: 'visible' },\n    '&.Mui-focusVisible': {\n      outlineColor: focusColor,\n    },\n  };\n});\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'tone'].includes(prop as string),\n})<{ variant: IconButtonVariant; tone: IconButtonTone }>(({ theme, variant = 'primary', tone = 'brand' }) => {\n  const styles = getIconButtonStyles(theme, variant, tone);\n\n  return {\n    alignItems: 'center',\n    borderRadius: 'inherit',\n    display: 'flex',\n    height: '100%',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    width: '100%',\n    '[data-variant]:hover:not(.Mui-disabled) > &': styles.hover,\n    '[data-variant]:active:not(.Mui-disabled) > &': styles.press,\n  };\n});\n\nconst StyledBadgeCount = styled(BadgeCount, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nconst StyledBadgeDot = styled(BadgeDot, {\n  shouldForwardProp: (prop) => !['size'].includes(prop as string),\n})<{ size: 'medium' | 'small' }>(({ theme, size }) => ({\n  position: 'absolute',\n  bottom: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  left: size === 'small' ? theme.spacing(2.5) : theme.spacing(4),\n  zIndex: 1,\n  pointerEvents: 'none',\n}));\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      badgeCount,\n      badgeDot = false,\n      children,\n      className,\n      disabled = false,\n      fdKey,\n      onClick,\n      size = 'medium',\n      tone = 'brand',\n      variant = 'primary',\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <StyledIconButton\n        ref={ref}\n        disableRipple\n        className={className}\n        data-fd={fdKey}\n        data-tone={tone}\n        data-variant={variant}\n        disabled={disabled}\n        onClick={onClick}\n        size={size}\n        tone={tone}\n        variant={variant}\n        {...rest}\n      >\n        <StyledBox tone={tone} variant={variant}>\n          {children}\n        </StyledBox>\n        {!!badgeCount && (\n          <StyledBadgeCount fdKey=\"icon-button-badge-count\" size={size}>\n            {badgeCount}\n          </StyledBadgeCount>\n        )}\n\n        {badgeDot && !badgeCount && <StyledBadgeDot fdKey=\"icon-button-badge-dot\" size={size} />}\n      </StyledIconButton>\n    );\n  },\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","MuiIconButton","shouldForwardProp","prop","includes","theme","variant","tone","styles","getIconButtonStyles","focusColor","palette","semantic","stroke","default","overflow","disabled","outlineColor","StyledBox","Box","alignItems","borderRadius","display","height","justifyContent","pointerEvents","width","hover","press","StyledBadgeCount","BadgeCount","size","position","bottom","spacing","left","zIndex","StyledBadgeDot","BadgeDot","IconButton","forwardRef","badgeCount","badgeDot","children","className","fdKey","onClick","rest","ref","_jsxs","disableRipple","_jsx","displayName"],"mappings":"wVAoCA,MAAMA,EAAmBC,EAAOC,EAAe,CAC7CC,kBAAoBC,IACjB,CAAC,UAAW,OAAQ,WAAY,aAAc,SAASC,SAASD,IAF5CH,CAOtB,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YACvC,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAC7CG,EACK,YAATH,EACIF,EAAMM,QAAQC,SAASC,OAAO,yBAC9BR,EAAMM,QAAQC,SAASC,OAAO,gBAEpC,MAAO,IACFL,EAAOM,QACVC,SAAU,UACV,iBAAkB,IAAKP,EAAOQ,SAAUD,SAAU,WAClD,qBAAsB,CACpBE,aAAcP,MAKdQ,EAAYlB,EAAOmB,EAAK,CAC5BjB,kBAAoBC,IAAU,CAAC,UAAW,QAAQC,SAASD,IAD3CH,CAEuC,EAAGK,QAAOC,UAAU,UAAWC,OAAO,YAC7F,MAAMC,EAASC,EAAoBJ,EAAOC,EAASC,GAEnD,MAAO,CACLa,WAAY,SACZC,aAAc,UACdC,QAAS,OACTC,OAAQ,OACRC,eAAgB,SAChBT,SAAU,SACVU,cAAe,OACfC,MAAO,OACP,8CAA+ClB,EAAOmB,MACtD,+CAAgDnB,EAAOoB,SAIrDC,EAAmB7B,EAAO8B,EAAY,CAC1C5B,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IADzBH,CAEQ,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,UAGXY,EAAiBrC,EAAOsC,EAAU,CACtCpC,kBAAoBC,IAAU,CAAC,QAAQC,SAASD,IAD3BH,CAEU,EAAGK,QAAO0B,WAAM,CAC/CC,SAAU,WACVC,OAAiB,UAATF,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC9DC,KAAe,UAATJ,EAAmB1B,EAAM6B,QAAQ,KAAO7B,EAAM6B,QAAQ,GAC5DE,OAAQ,EACRX,cAAe,UAGJc,EAAaC,EACxB,EAEIC,aACAC,YAAW,EACXC,WACAC,YACA5B,YAAW,EACX6B,QACAC,UACAf,OAAO,SACPxB,OAAO,QACPD,UAAU,aACPyC,GAELC,IAGEC,EAAClD,EAAgB,CACfiD,IAAKA,EACLE,eAAa,EACbN,UAAWA,YACFC,EAAK,YACHtC,EAAI,eACDD,EACdU,SAAUA,EACV8B,QAASA,EACTf,KAAMA,EACNxB,KAAMA,EACND,QAASA,KACLyC,EAAIJ,SAAA,CAERQ,EAACjC,EAAS,CAACX,KAAMA,EAAMD,QAASA,EAAOqC,SACpCA,MAEAF,GACDU,EAACtB,EAAgB,CAACgB,MAAM,0BAA0Bd,KAAMA,WACrDU,IAIJC,IAAaD,GAAcU,EAACd,GAAeQ,MAAM,wBAAwBd,KAAMA,QAMxFQ,EAAWa,YAAc"}

package/dist/components/atoms/IconContainer/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},o=(e,t,r)=>s.background[r][t](e),l=(e,t,r)=>s.border[r][t](e),c=(e,t)=>s.icon[t](e),u=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:o(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:l(e,t,r),boxSizing:"border-box",color:c(e,t)}))),d=i.memo((({ariaLabel:t,className:r,fdKey:a,icon:n,style:i="filled",tone:s="neutral"})=>{const o=t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(u,{className:r,containerStyle:i,"data-fd":a,tone:s,...o,children:n})}));d.displayName="IconContainer",module.exports=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},o=(e,t,r)=>s.background[r][t](e),l=(e,t,r)=>s.border[r][t](e),c=(e,t)=>s.icon[t](e),u=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:o(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:l(e,t,r),boxSizing:"border-box",color:c(e,t)})),d=i.memo(({ariaLabel:t,className:r,fdKey:a,icon:n,style:i="filled",tone:s="neutral"})=>{const o=t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(u,{className:r,containerStyle:i,"data-fd":a,tone:s,...o,children:n})});d.displayName="IconContainer",module.exports=d;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/IconContainer/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","ariaProps","role","_jsx","children","displayName"],"mappings":"kZAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWvBqB,EAAgBC,EAAMC,MAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,cAE7D,MAAM2B,EAAYH,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAErB,OACEC,EAAAA,IAACzB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAAU2B,EAASG,SAC9FhC,OAMTuB,EAAcU,YAAc"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","ariaProps","role","_jsx","children","displayName"],"mappings":"gZAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,cAE7D,MAAM2B,EAAYH,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAErB,OACEC,EAAAA,IAACzB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAAU2B,EAASG,SAC9FhC,MAMTuB,EAAcU,YAAc"}

package/dist/components/atoms/IconContainer/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),o=(e,t,a)=>n.border[a][t](e),s=(e,t)=>n.icon[t](e),l=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})((({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:o(e,t,a),boxSizing:"border-box",color:s(e,t)}))),c=t.memo((({ariaLabel:t,className:a,fdKey:r,icon:n,style:i="filled",tone:o="neutral"})=>e(l,{className:a,containerStyle:i,"data-fd":r,tone:o,...t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0},children:n})));c.displayName="IconContainer";export{c as default};
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",information:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],information:e=>e.palette.semantic.icon["icon-information"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),o=(e,t,a)=>n.border[a][t](e),s=(e,t)=>n.icon[t](e),l=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:o(e,t,a),boxSizing:"border-box",color:s(e,t)})),c=t.memo(({ariaLabel:t,className:a,fdKey:r,icon:n,style:i="filled",tone:o="neutral"})=>e(l,{className:a,containerStyle:i,"data-fd":r,tone:o,...t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0},children:n}));c.displayName="IconContainer";export{c as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/IconContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","_jsx","role","children","displayName"],"mappings":"+IAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,EAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,OAWvBqB,EAAgBC,EAAMC,MAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,aAO3D2B,EAACvB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAL9DwB,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAG8EC,SAC9F/B,MAMTuB,EAAcS,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'brand' | 'destructive' | 'information' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n  /** Accessible description of the icon (for screen readers) */\n  ariaLabel?: string;\n  /** Additional class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  fdKey?: string;\n  /** Icon element to display in the container */\n  icon: React.ReactNode;\n  /** Visual style of the container */\n  style?: IconContainerStyle;\n  /** Visual tone of the container */\n  tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n  background: {\n    filled: {\n      brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.fill['fill-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n    },\n    stroked: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n  },\n  border: {\n    filled: {\n      brand: () => 'transparent',\n      destructive: () => 'transparent',\n      warning: () => 'transparent',\n      success: () => 'transparent',\n      information: () => 'transparent',\n      neutral: () => 'transparent',\n    },\n    stroked: {\n      brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n      destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n      warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n      success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n      information: (theme: Theme) => theme.palette.semantic.stroke['stroke-information-weak'],\n      neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n    },\n  },\n  icon: {\n    brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n    destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n    warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n    success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n    information: (theme: Theme) => theme.palette.semantic.icon['icon-information'],\n    neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n  },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n  return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n  return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n  tone: IconContainerTones;\n  containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '48px',\n  height: '48px',\n  borderRadius: '50%',\n  backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n  border: containerStyle === 'stroked' ? '1px solid' : 'none',\n  borderColor: getBorderColor(theme, tone, containerStyle),\n  boxSizing: 'border-box',\n  color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n  ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n    // Only set aria-hidden if no ariaLabel is provided\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n      : { 'aria-hidden': true };\n\n    return (\n      <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n        {icon}\n      </StyledBox>\n    );\n  },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","information","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","_jsx","role","children","displayName"],"mappings":"+IAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,YAAcP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,yBAC3DK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,YAAa,IAAM,cACnBC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,YAAcP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,2BAC7DH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,YAAcP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,oBAC3DJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,aAO3D2B,EAACvB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAL9DwB,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAG8EC,SAC9F/B,KAMTuB,EAAcS,YAAc"}

package/dist/components/atoms/LinearProgress/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("@mui/material/LinearProgress"),a=require("@mui/material/Box"),l=require("@mui/material/Typography"),i=require("@mui/material/styles");const t=i.styled(s)((({theme:e})=>({height:8,[`&.${s.linearProgressClasses.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${s.linearProgressClasses.colorPrimary} .${s.linearProgressClasses.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${s.linearProgressClasses.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.dashed}`]:{marginTop:2}}))),o=i.styled(a)((({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"}))),d=i.styled(l)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),n=i.styled(a)((()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"}))),u=({fdKey:s,label:l,showLabel:i,value:u,...c})=>{const m=r.useId(),p=r.useMemo((()=>l||(void 0!==u?`${u}%`:void 0)),[l,u]);return e.jsxs(o,{children:[e.jsx(a,{flex:1,children:e.jsx(t,{"aria-label":!i&&p?p:void 0,"aria-labelledby":i&&p?m:void 0,...c,"data-fd":s,value:u})}),i&&e.jsx(n,{children:e.jsx(d,{id:m,variant:"captionWeak",children:p})})]})};Object.defineProperty(exports,"linearProgressClasses",{enumerable:!0,get:function(){return s.linearProgressClasses}}),exports.LinearProgress=u,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("@mui/material/LinearProgress"),a=require("@mui/material/Box"),l=require("@mui/material/Typography"),i=require("@mui/material/styles");const t=i.styled(s)(({theme:e})=>({height:8,[`&.${s.linearProgressClasses.root}`]:{borderRadius:e.radius["radius-8"],overflow:"hidden",backgroundColor:e.palette.semantic.fill["fill-weak"],...e.applyStyles("dark",{backgroundColor:e.palette.grey[800]}),boxShadow:e.customShadows?.sunken},[`&.${s.linearProgressClasses.colorPrimary} .${s.linearProgressClasses.bar}`]:{backgroundColor:e.palette.semantic.fill["fill-selected"],...e.applyStyles("dark",{backgroundColor:e.palette.semantic.fill["fill-selected"]})},[`& .${s.linearProgressClasses.bar1}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.bar2}`]:{borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken},[`& .${s.linearProgressClasses.dashed}`]:{marginTop:2}})),o=i.styled(a)(({theme:e})=>({lineHeight:"20px",gap:e.spacing(1),alignItems:"center",display:"flex"})),d=i.styled(l)(({theme:e})=>({color:e.palette.semantic.text["text-weak"]})),n=i.styled(a)(()=>({alignItems:"center",display:"flex",height:"20px",justifyContent:"flex-end",minWidth:"40px"})),u=({fdKey:s,label:l,showLabel:i,value:u,...c})=>{const m=r.useId(),p=r.useMemo(()=>l||(void 0!==u?`${u}%`:void 0),[l,u]);return e.jsxs(o,{children:[e.jsx(a,{flex:1,children:e.jsx(t,{"aria-label":!i&&p?p:void 0,"aria-labelledby":i&&p?m:void 0,...c,"data-fd":s,value:u})}),i&&e.jsx(n,{children:e.jsx(d,{id:m,variant:"captionWeak",children:p})})]})};Object.defineProperty(exports,"linearProgressClasses",{enumerable:!0,get:function(){return s.linearProgressClasses}}),exports.LinearProgress=u,exports.default=u;
 //# sourceMappingURL=index.cjs.js.map