@flipdish/portal-library 2.1.5 → 3.1.0

package/dist/components/PortalMock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PortalMock/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport Drawer from '@mui/material/Drawer';\nimport Typography from '@mui/material/Typography';\n\nconst drawerWidth = 198;\n\nconst StyledHeader = styled('div')(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.palette.semantic.background['background-sunken'],\n    height: '65px',\n    color: theme.palette.semantic.text['text-weak'],\n    borderBottom: `2px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n}));\n\nconst StyledSidebar = styled('div')(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.palette.semantic.background['background-sunken'],\n    height: '100%',\n    color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledAppBar = styled(AppBar)`\n    width: ${({ theme }) => (theme.breakpoints.up('sm') ? `calc(100% - ${drawerWidth}px)` : '100%')};\n    margin-left: ${({ theme }) => (theme.breakpoints.up('sm') ? `${drawerWidth}px` : '0')};\n    box-shadow: none;\n`;\n\nconst StyledDrawer = styled(Drawer)`\n    display: ${({ theme }) => (theme.breakpoints.up('sm') ? 'block' : 'none')};\n    & .MuiDrawer-paper {\n        box-sizing: border-box;\n        width: ${drawerWidth}px;\n        border-color: ${({ theme }) => theme.palette.semantic.stroke['stroke-weak']};\n        border-width: 2px;\n    }\n`;\n\nconst StyledNavBox = styled(Box)`\n    width: ${({ theme }) => (theme.breakpoints.up('sm') ? `${drawerWidth}px` : '0')};\n    flex-shrink: ${({ theme }) => (theme.breakpoints.up('sm') ? '0' : '1')};\n`;\n\nconst StyledMainBox = styled(Box)`\n    flex-grow: 1;\n    width: ${({ theme }) => (theme.breakpoints.up('sm') ? `calc(100% - ${drawerWidth}px)` : '100%')};\n    margin-top: 65px;\n`;\n\nconst StyledBoldTypography = styled(Typography)`\n    font-weight: bold;\n`;\n\ntype Props = {\n    loadedFromPortal: boolean;\n    children: React.ReactNode;\n};\n\nconst PortalMock = ({ children, loadedFromPortal }: Props) => {\n    if (loadedFromPortal) {\n        return <>{children}</>;\n    }\n\n    const drawer = (\n        <StyledSidebar>\n            <StyledBoldTypography>Sidebar</StyledBoldTypography>\n        </StyledSidebar>\n    );\n\n    return (\n        <Box sx={{ display: 'flex' }}>\n            <CssBaseline />\n            <StyledAppBar position=\"fixed\">\n                <StyledHeader>\n                    <StyledBoldTypography>Header</StyledBoldTypography>\n                </StyledHeader>\n            </StyledAppBar>\n            <StyledNavBox as=\"nav\" aria-label=\"mailbox folders\">\n                <StyledDrawer variant=\"permanent\" open>\n                    {drawer}\n                </StyledDrawer>\n            </StyledNavBox>\n            <StyledMainBox as=\"main\">{children}</StyledMainBox>\n        </Box>\n    );\n};\n\nexport default PortalMock;\n"],"names":["drawerWidth","StyledHeader","styled","theme","display","justifyContent","alignItems","backgroundColor","palette","semantic","background","height","color","text","borderBottom","stroke","StyledSidebar","StyledAppBar","AppBar","breakpoints","up","StyledDrawer","Drawer","StyledNavBox","Box","StyledMainBox","StyledBoldTypography","Typography","PortalMock","children","loadedFromPortal","_jsx","_Fragment","drawer","_jsxs","sx","CssBaseline","position","as","variant","open"],"mappings":"wSAOA,MAAMA,EAAc,IAEdC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CAC/CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,gBAAiBJ,EAAMK,QAAQC,SAASC,WAAW,qBACnDC,OAAQ,OACRC,MAAOT,EAAMK,QAAQC,SAASI,KAAK,aACnCC,aAAc,aAAaX,EAAMK,QAAQC,SAASM,OAAO,qBAGvDC,EAAgBd,EAAO,MAAPA,EAAc,EAAGC,YAAa,CAChDC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,gBAAiBJ,EAAMK,QAAQC,SAASC,WAAW,qBACnDC,OAAQ,OACRC,MAAOT,EAAMK,QAAQC,SAASI,KAAK,iBAGjCI,EAAef,EAAOgB,EAAO;aACtB,EAAGf,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,qBAAkC;mBACzE,EAAGjB,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,QAAqB;;EAI/EC,EAAenB,EAAOoB,EAAO;eACpB,EAAGnB,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,QAAU;;;iBAGrDpB;wBACO,EAAGG,WAAYA,EAAMK,QAAQC,SAASM,OAAO;;;EAK/DQ,EAAerB,EAAOsB,EAAI;aACnB,EAAGrB,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,QAAqB;mBAC5D,EAAGjB,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,IAAM;EAGhEK,EAAgBvB,EAAOsB,EAAI;;aAEpB,EAAGrB,WAAaA,EAAMgB,YAAYC,GAAG,MAAQ,qBAAkC;;EAItFM,EAAuBxB,EAAOyB,EAAW;;EASzCC,EAAa,EAAGC,WAAUC,uBAC5B,GAAIA,EACA,OAAOC,EAAAC,EAAA,CAAAH,SAAGA,IAGd,MAAMI,EACFF,EAACf,EACG,CAAAa,SAAAE,EAACL,EAAoB,CAAAG,SAAA,cAI7B,OACIK,EAACV,EAAG,CAACW,GAAI,CAAE/B,QAAS,QAAQyB,SAAA,CACxBE,EAACK,EAAW,CAAA,GACZL,EAACd,EAAY,CAACoB,SAAS,QAAOR,SAC1BE,EAAC9B,EACG,CAAA4B,SAAAE,EAACL,EAAoB,CAAAG,SAAA,eAG7BE,EAACR,EAAa,CAAAe,GAAG,MAAiB,aAAA,kBAC9BT,SAAAE,EAACV,EAAY,CAACkB,QAAQ,YAAYC,MAC7B,EAAAX,SAAAI,MAGTF,EAACN,EAAc,CAAAa,GAAG,OAAQT,SAAAA,MACxB"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PortalMock/index.tsx"],"sourcesContent":["import AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport Drawer from '@mui/material/Drawer';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nconst drawerWidth = 198;\n\nconst StyledHeader = styled('div')(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: theme.palette.semantic.background['background-sunken'],\n  height: '65px',\n  color: theme.palette.semantic.text['text-weak'],\n  borderBottom: `2px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n}));\n\nconst StyledSidebar = styled('div')(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: theme.palette.semantic.background['background-sunken'],\n  height: '100%',\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledAppBar = styled(AppBar)`\n  width: ${({ theme }) => (theme.breakpoints.up('tablet') ? `calc(100% - ${drawerWidth}px)` : '100%')};\n  margin-left: ${({ theme }) => (theme.breakpoints.up('tablet') ? `${drawerWidth}px` : '0')};\n  box-shadow: none;\n`;\n\nconst StyledDrawer = styled(Drawer)`\n  display: ${({ theme }) => (theme.breakpoints.up('tablet') ? 'block' : 'none')};\n  & .MuiDrawer-paper {\n    box-sizing: border-box;\n    width: ${drawerWidth}px;\n    border-color: ${({ theme }) => theme.palette.semantic.stroke['stroke-weak']};\n    border-width: 2px;\n  }\n`;\n\nconst StyledNavBox = styled(Box)`\n  width: ${({ theme }) => (theme.breakpoints.up('tablet') ? `${drawerWidth}px` : '0')};\n  flex-shrink: ${({ theme }) => (theme.breakpoints.up('tablet') ? '0' : '1')};\n`;\n\nconst StyledMainBox = styled(Box)`\n  flex-grow: 1;\n  width: ${({ theme }) => (theme.breakpoints.up('tablet') ? `calc(100% - ${drawerWidth}px)` : '100%')};\n  margin-top: 65px;\n`;\n\nconst StyledBoldTypography = styled(Typography)`\n  font-weight: bold;\n`;\n\ninterface Props {\n  loadedFromPortal: boolean;\n  children: React.ReactNode;\n}\n\nconst PortalMock = ({ children, loadedFromPortal }: Props) => {\n  if (loadedFromPortal) {\n    /* eslint-disable-next-line react/jsx-no-useless-fragment */\n    return <>{children}</>;\n  }\n\n  const drawer = (\n    <StyledSidebar>\n      <StyledBoldTypography>Sidebar</StyledBoldTypography>\n    </StyledSidebar>\n  );\n\n  return (\n    <Box sx={{ display: 'flex' }}>\n      <CssBaseline />\n      <StyledAppBar position=\"fixed\">\n        <StyledHeader>\n          <StyledBoldTypography>Header</StyledBoldTypography>\n        </StyledHeader>\n      </StyledAppBar>\n      <StyledNavBox aria-label=\"mailbox folders\" as=\"nav\">\n        <StyledDrawer open variant=\"permanent\">\n          {drawer}\n        </StyledDrawer>\n      </StyledNavBox>\n      <StyledMainBox as=\"main\">{children}</StyledMainBox>\n    </Box>\n  );\n};\n\nexport default PortalMock;\n"],"names":["drawerWidth","StyledHeader","styled","theme","display","justifyContent","alignItems","backgroundColor","palette","semantic","background","height","color","text","borderBottom","stroke","StyledSidebar","StyledAppBar","AppBar","breakpoints","up","StyledDrawer","Drawer","StyledNavBox","Box","StyledMainBox","StyledBoldTypography","Typography","PortalMock","children","loadedFromPortal","_jsx","_Fragment","drawer","_jsxs","sx","CssBaseline","position","as","open","variant"],"mappings":"wSAOA,MAAMA,EAAc,IAEdC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACjDC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,gBAAiBJ,EAAMK,QAAQC,SAASC,WAAW,qBACnDC,OAAQ,OACRC,MAAOT,EAAMK,QAAQC,SAASI,KAAK,aACnCC,aAAc,aAAaX,EAAMK,QAAQC,SAASM,OAAO,qBAGrDC,EAAgBd,EAAO,MAAPA,EAAc,EAAGC,YAAa,CAClDC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,gBAAiBJ,EAAMK,QAAQC,SAASC,WAAW,qBACnDC,OAAQ,OACRC,MAAOT,EAAMK,QAAQC,SAASI,KAAK,iBAG/BI,EAAef,EAAOgB,EAAO;WACxB,EAAGf,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,qBAAkC;iBAC7E,EAAGjB,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,QAAqB;;EAIjFC,EAAenB,EAAOoB,EAAO;aACtB,EAAGnB,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,QAAU;;;aAG3DpB;oBACO,EAAGG,WAAYA,EAAMK,QAAQC,SAASM,OAAO;;;EAK3DQ,EAAerB,EAAOsB,EAAI;WACrB,EAAGrB,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,QAAqB;iBAChE,EAAGjB,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,IAAM;EAGlEK,EAAgBvB,EAAOsB,EAAI;;WAEtB,EAAGrB,WAAaA,EAAMgB,YAAYC,GAAG,UAAY,qBAAkC;;EAIxFM,EAAuBxB,EAAOyB,EAAW;;EASzCC,EAAa,EAAGC,WAAUC,uBAC9B,GAAIA,EAEF,OAAOC,EAAAC,EAAA,CAAAH,SAAGA,IAGZ,MAAMI,EACJF,EAACf,EACC,CAAAa,SAAAE,EAACL,EAAoB,CAAAG,SAAA,cAIzB,OACEK,EAACV,EAAG,CAACW,GAAI,CAAE/B,QAAS,QAAQyB,SAAA,CAC1BE,EAACK,EAAW,CAAA,GACZL,EAACd,EAAY,CAACoB,SAAS,QAAOR,SAC5BE,EAAC9B,EACC,CAAA4B,SAAAE,EAACL,EAAoB,CAAAG,SAAA,eAGzBE,EAACR,EAAwB,CAAA,aAAA,kBAAkBe,GAAG,MAC5CT,SAAAE,EAACV,EAAY,CAACkB,MAAI,EAACC,QAAQ,YACxBX,SAAAI,MAGLF,EAACN,EAAc,CAAAa,GAAG,OAAQT,SAAAA,MACtB"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Box"),i=require("@mui/material/Button"),r=require("@mui/material/Modal"),o=require("@mui/material/Stack"),n=require("@mui/material/styles"),l=require("@mui/material/Typography"),s=require("@mui/material/useMediaQuery"),d=require("../../../themes/tokens/breakpoints/breakpoints.cjs.js"),c=require("../../atoms/IconContainer/index.cjs.js"),u=require("../../Spacer/index.cjs.js");const m={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"},button:{default:()=>"primary",destructive:()=>"error"}},p=e=>m.iconContainer[e](),x=e=>m.button[e](),h=n.styled(a,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(d.breakpointValues.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),g=n.styled("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),b=n.styled(o)({justifyContent:"flex-start",alignItems:"center"}),f=n.styled(a)((({theme:e})=>({[e.breakpoints.down(d.breakpointValues.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),j=t.memo((({open:t,onClose:a,tone:o="default",size:m="large",title:j,description:y,property:k,primaryButtonLabel:v,secondaryButtonLabel:w,onPrimaryButtonClick:q,onSecondaryButtonClick:z,className:C,"data-testid":$,children:B})=>{const S=n.useTheme(),W=s(S.breakpoints.down(d.breakpointValues.tablet)),F="string"==typeof k,H=!!v&&!!q,M=!!w&&!!z,D=H||M;return e.jsx(r,{"aria-describedby":`modal-description-${$??"default"}`,"aria-labelledby":`modal-title-${$??"default"}`,className:C,"data-testid":$,open:t,onClose:a,children:e.jsxs(h,{size:m,tone:o,children:[e.jsxs(f,{children:[k&&e.jsxs(e.Fragment,{children:[F?e.jsx(g,{alt:j??"Modal image",src:k}):e.jsx(c,{icon:k,style:"filled",tone:p(o)}),e.jsx(u,{size:16,variant:"horizontal"})]}),j&&e.jsx(l,{component:"h2",id:`modal-title-${$??"default"}`,variant:"h3Strong",children:j}),j&&y&&e.jsx(u,{size:8,variant:"horizontal"}),y&&e.jsx(l,{color:S.palette.semantic.text["text-weak"],id:`modal-description-${$??"default"}`,variant:"b1Weak",children:y}),B&&e.jsxs(e.Fragment,{children:[e.jsx(u,{size:24,variant:"horizontal"}),B]})]}),D&&e.jsxs(e.Fragment,{children:[e.jsx(u,{size:24,variant:"horizontal"}),e.jsxs(b,{direction:W?"column":"row",spacing:2,children:[H&&e.jsx(i,{color:x(o),fullWidth:W,variant:"contained",onClick:q,children:v}),M&&e.jsx(i,{color:x(o),fullWidth:W,variant:"outlined",onClick:z,children:w})]})]})]})})}));j.displayName="Modal",module.exports=j;
+//# sourceMappingURL=index.cjs.js.map

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

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

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

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Visual tone of the modal */
+type ModalTones = 'default' | 'destructive';
+/** Size variants for the modal */
+type ModalSizes = 'large' | 'small';
+/** Props for the Modal component */
+interface ModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback function when the modal is closed */
+    onClose: () => void;
+    /** Visual tone of the modal */
+    tone?: ModalTones;
+    /** Size variant of the modal */
+    size?: ModalSizes;
+    /** Main heading text of the modal */
+    title?: string;
+    /** Detailed description text of the modal */
+    description?: string;
+    /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */
+    property?: React.ReactNode | string;
+    /** Primary button label */
+    primaryButtonLabel?: string;
+    /** Secondary button label */
+    secondaryButtonLabel?: string;
+    /** Primary button click handler */
+    onPrimaryButtonClick?: () => void;
+    /** Secondary button click handler */
+    onSecondaryButtonClick?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing and automation */
+    'data-testid'?: string;
+    /** Content to display in the modal */
+    children?: React.ReactNode;
+}
+/**
+ * Modal component is used to display content that temporarily blocks interaction with the main view.
+ * It creates a focused mode for completing tasks or viewing important information without leaving the current page.
+ *
+ * The component is wrapped with React.memo to optimize performance by preventing unnecessary
+ * re-renders when the component's props haven't changed.
+ */
+declare const Modal: react.MemoExoticComponent<({ open, onClose, tone, size, title, description, property, primaryButtonLabel, secondaryButtonLabel, onPrimaryButtonClick, onSecondaryButtonClick, className, "data-testid": dataTestId, children, }: ModalProps) => react_jsx_runtime.JSX.Element>;
+
+export { Modal as default };
+export type { ModalProps, ModalSizes, ModalTones };

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import{memo as a}from"react";import o from"@mui/material/Box";import r from"@mui/material/Button";import n from"@mui/material/Modal";import l from"@mui/material/Stack";import{styled as d,useTheme as c}from"@mui/material/styles";import s from"@mui/material/Typography";import m from"@mui/material/useMediaQuery";import{breakpointValues as p}from"../../../themes/tokens/breakpoints/breakpoints.js";import u from"../../atoms/IconContainer/index.js";import h from"../../Spacer/index.js";const f={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"},button:{default:()=>"primary",destructive:()=>"error"}},g=t=>f.iconContainer[t](),x=t=>f.button[t](),b=d(o,{shouldForwardProp:t=>!["tone","size"].includes(t)})((({theme:t,size:e})=>({position:"absolute",backgroundColor:t.palette.semantic.background["background-overlay"],border:"none",borderRadius:t.radius["radius-16"],padding:t.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===e?"700px":"500px",width:`calc(100% - ${t.spacing(4)})`,[t.breakpoints.down(p.tablet)]:{..."small"===e&&{maxWidth:`calc(100% - ${t.spacing(4)})`,width:`calc(100% - ${t.spacing(4)})`,top:"auto",bottom:t.spacing(2),left:t.spacing(2),right:t.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===e&&{height:`calc(100% - ${t.spacing(4)})`,maxHeight:`calc(100% - ${t.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),y=d("img")((({theme:t})=>({width:"100%",height:"auto",borderRadius:t.radius["radius-8"]}))),v=d(l)({justifyContent:"flex-start",alignItems:"center"}),k=d(o)((({theme:t})=>({[t.breakpoints.down(p.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:t.spacing(3)}}))),w=a((({open:a,onClose:o,tone:l="default",size:d="large",title:f,description:w,property:z,primaryButtonLabel:C,secondaryButtonLabel:$,onPrimaryButtonClick:B,onSecondaryButtonClick:j,className:S,"data-testid":W,children:H})=>{const M=c(),D=m(M.breakpoints.down(p.tablet)),N=!!C&&!!B,Y=!!$&&!!j,I=N||Y;return t(n,{"aria-describedby":`modal-description-${W??"default"}`,"aria-labelledby":`modal-title-${W??"default"}`,className:S,"data-testid":W,open:a,onClose:o,children:e(b,{size:d,tone:l,children:[e(k,{children:[z&&e(i,{children:["string"==typeof z?t(y,{alt:f??"Modal image",src:z}):t(u,{icon:z,style:"filled",tone:g(l)}),t(h,{size:16,variant:"horizontal"})]}),f&&t(s,{component:"h2",id:`modal-title-${W??"default"}`,variant:"h3Strong",children:f}),f&&w&&t(h,{size:8,variant:"horizontal"}),w&&t(s,{color:M.palette.semantic.text["text-weak"],id:`modal-description-${W??"default"}`,variant:"b1Weak",children:w}),H&&e(i,{children:[t(h,{size:24,variant:"horizontal"}),H]})]}),I&&e(i,{children:[t(h,{size:24,variant:"horizontal"}),e(v,{direction:D?"column":"row",spacing:2,children:[N&&t(r,{color:x(l),fullWidth:D,variant:"contained",onClick:B,children:C}),Y&&t(r,{color:x(l),fullWidth:D,variant:"outlined",onClick:j,children:$})]})]})]})})}));w.displayName="Modal";export{w as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button, { type ButtonProps } from '@mui/material/Button';\nimport MuiModal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Primary button label */\n  primaryButtonLabel?: string;\n  /** Secondary button label */\n  secondaryButtonLabel?: string;\n  /** Primary button click handler */\n  onPrimaryButtonClick?: () => void;\n  /** Secondary button click handler */\n  onSecondaryButtonClick?: () => void;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\nconst getButtonTone = (tone: ModalTones): ButtonProps['color'] => {\n  return COLOURS.button[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    primaryButtonLabel,\n    secondaryButtonLabel,\n    onPrimaryButtonClick,\n    onSecondaryButtonClick,\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n\n    const shouldShowPrimaryButton = !!primaryButtonLabel && !!onPrimaryButtonClick;\n    const shouldShowSecondaryButton = !!secondaryButtonLabel && !!onSecondaryButtonClick;\n    const showButtonSection = shouldShowPrimaryButton || shouldShowSecondaryButton;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        open={open}\n        onClose={onClose}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {/* TODO: Use button group when it's ready */}\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row'} spacing={2}>\n                {shouldShowPrimaryButton && (\n                  <Button\n                    color={getButtonTone(tone)}\n                    fullWidth={isTabletOrMobile}\n                    variant=\"contained\"\n                    onClick={onPrimaryButtonClick}\n                  >\n                    {primaryButtonLabel}\n                  </Button>\n                )}\n                {shouldShowSecondaryButton && (\n                  <Button\n                    color={getButtonTone(tone)}\n                    fullWidth={isTabletOrMobile}\n                    variant=\"outlined\"\n                    onClick={onSecondaryButtonClick}\n                  >\n                    {secondaryButtonLabel}\n                  </Button>\n                )}\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","button","getIconContainerTone","tone","getButtonTone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","primaryButtonLabel","secondaryButtonLabel","onPrimaryButtonClick","onSecondaryButtonClick","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","shouldShowPrimaryButton","shouldShowSecondaryButton","showButtonSection","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","Button","fullWidth","onClick","displayName"],"mappings":"miBAqDA,MAAMA,EAAU,CACdC,cAAe,CACbC,QAAS,IAA0B,UACnCC,YAAa,IAA0B,eAEzCC,OAAQ,CACNF,QAAS,IAA4B,UACrCC,YAAa,IAA4B,UAIvCE,EAAwBC,GACrBN,EAAQC,cAAcK,KAGzBC,EAAiBD,GACdN,EAAQI,OAAOE,KAQlBE,EAAiBC,EAAOC,EAAK,CACjCC,kBAAoBC,IAAU,CAAC,OAAQ,QAAQC,SAASD,IADnCH,EAEC,EAAGK,QAAOC,WAAY,CAC5CC,SAAU,WACVC,gBAAiBH,EAAMI,QAAQC,SAASC,WAAW,sBACnDC,OAAQ,OACRC,aAAcR,EAAMS,OAAO,aAC3BC,QAASV,EAAMW,QAAQ,GACvBC,UAAW,4EACXC,QAAS,OACTC,UAAW,OACXC,UAAW,OAGXC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,SAAmB,UAATlB,EAAmB,QAAU,QACvCmB,MAAO,eAAepB,EAAMW,QAAQ,MAGpC,CAACX,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,IAEpC,UAATvB,GAAoB,CACtBkB,SAAU,eAAenB,EAAMW,QAAQ,MACvCS,MAAO,eAAepB,EAAMW,QAAQ,MACpCK,IAAK,OACLS,OAAQzB,EAAMW,QAAQ,GACtBM,KAAMjB,EAAMW,QAAQ,GACpBe,MAAO1B,EAAMW,QAAQ,GACrBO,UAAW,OACXJ,UAAW,OACXC,UAAW,OAEXY,QAAS,OACTC,cAAe,aAIJ,UAAT3B,GAAoB,CACtB4B,OAAQ,eAAe7B,EAAMW,QAAQ,MACrCG,UAAW,eAAed,EAAMW,QAAQ,MACxCI,UAAW,OAEXY,QAAS,OACTC,cAAe,eAKfE,EAAcnC,EAAO,MAAPA,EAAc,EAAGK,YAAa,CAChDoB,MAAO,OACPS,OAAQ,OACRrB,aAAcR,EAAMS,OAAO,gBAGvBsB,EAAoBpC,EAAOqC,EAAPrC,CAAc,CACtCsC,eAAgB,aAChBC,WAAY,WAGRC,EAAyBxC,EAAOC,EAAPD,EAAY,EAAGK,YAAa,CACzD,CAACA,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,CACjDY,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,cACXC,cAAetC,EAAMW,QAAQ,QAW3B4B,EAAQC,GACZ,EACEC,OACAC,UACAlD,OAAO,UACPS,OAAO,QACP0C,QACAC,cACAC,WACAC,qBACAC,uBACAC,uBACAC,yBACAC,YACA,cAAeC,EACfC,eAEA,MAAMpD,EAAQqD,IACRC,EAAmBC,EAAcvD,EAAMqB,YAAYC,KAAKC,EAAiBC,SAIzEgC,IAA4BV,KAAwBE,EACpDS,IAA8BV,KAA0BE,EACxDS,EAAoBF,GAA2BC,EAErD,OACEE,EAACC,EAAQ,CAAA,mBACW,qBAAqBT,GAAc,8BACpC,eAAeA,GAAc,YAC9CD,UAAWA,EACE,cAAAC,EACbV,KAAMA,EACNC,QAASA,EAETU,SAAAS,EAACnE,EAAc,CAACO,KAAMA,EAAMT,KAAMA,EAChC4D,SAAA,CAAAS,EAAC1B,EACE,CAAAiB,SAAA,CAAAP,GACCgB,eAlB6B,iBAAbhB,EAoBZc,EAAC7B,EAAY,CAAAgC,IAAKnB,GAAS,cAAeoB,IAAKlB,IAE/Cc,EAACK,EAAa,CAACC,KAAMpB,EAAUqB,MAAM,SAAS1E,KAAMD,EAAqBC,KAE3EmE,EAACQ,EAAO,CAAAlE,KAAM,GAAImE,QAAQ,kBAG7BzB,GACCgB,EAACU,EAAW,CAAAC,UAAU,KAAKC,GAAI,eAAepB,GAAc,YAAaiB,QAAQ,WAC9EhB,SAAAT,IAGJA,GAASC,GAAee,EAACQ,GAAOlE,KAAM,EAAGmE,QAAQ,eACjDxB,GACCe,EAACU,EACC,CAAAG,MAAOxE,EAAMI,QAAQC,SAASoE,KAAK,aACnCF,GAAI,qBAAqBpB,GAAc,YACvCiB,QAAQ,SAAQhB,SAEfR,IAGJQ,GACCS,eACEF,EAACQ,EAAO,CAAAlE,KAAM,GAAImE,QAAQ,eACzBhB,QAKNM,GACCG,EAAAa,EAAA,CAAAtB,SAAA,CACEO,EAACQ,EAAO,CAAAlE,KAAM,GAAImE,QAAQ,eAC1BP,EAAC9B,EAAkB,CAAA4C,UAAWrB,EAAmB,SAAW,MAAO3C,QAAS,YACzE6C,GACCG,EAACiB,EACC,CAAAJ,MAAO/E,EAAcD,GACrBqF,UAAWvB,EACXc,QAAQ,YACRU,QAAS9B,EAERI,SAAAN,IAGJW,GACCE,EAACiB,EAAM,CACLJ,MAAO/E,EAAcD,GACrBqF,UAAWvB,EACXc,QAAQ,WACRU,QAAS7B,EAERG,SAAAL,cAOJ,IAKjBR,EAAMwC,YAAc"}

package/dist/themes/flipdishPublicTheme.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/styles/createTheme"),r=require("../icons/Cancel/index.cjs.js");require("./tokens/colours/primitives.cjs.js");var o=require("./tokens/colours/semantic.cjs.js"),t=require("./tokens/radius/radius.cjs.js"),i=require("./tokens/typography/variant-mapping.cjs.js"),s=require("./typography.cjs.js");const a=a=>{const p=e({typography:s.typography,palette:"light"===a?o.lightColours:o.darkColours,radius:t.radius});return Object.keys(s.typography).forEach((e=>{const r=e.split(/(?=[A-Z])/)[0];p.typography[e]={...p.typography[e],[p.breakpoints.down("md")]:{...s.getMobileTextStyle(r)}}})),e(p,{shape:{borderRadius:"4px"},components:{MuiAlert:{defaultProps:{components:{CloseIcon:r}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:p.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:p.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${p.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:p.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:i.typographyVariantMapping}}}})},p=a("light"),n=a("dark");exports.darkTheme=n,exports.lightTheme=p;
+"use strict";var e=require("@mui/material/styles/createTheme"),r=require("../icons/Cancel/index.cjs.js"),t=require("./tokens/breakpoints/breakpoints.cjs.js");require("./tokens/colours/primitives.cjs.js");var o=require("./tokens/colours/semantic.cjs.js"),i=require("./tokens/radius/radius.cjs.js"),s=require("./tokens/typography/variant-mapping.cjs.js"),a=require("./typography.cjs.js");const p=p=>{const n=e({typography:a.typography,palette:"light"===p?o.lightColours:o.darkColours,radius:i.radius,breakpoints:{values:t.breakpointValues}});return Object.keys(a.typography).forEach((e=>{const r=e.split(/(?=[A-Z])/)[0];n.typography[e]={...n.typography[e],[n.breakpoints.down("tablet")]:{...a.getMobileTextStyle(r)}}})),e(n,{shape:{borderRadius:"4px"},components:{MuiAlert:{defaultProps:{components:{CloseIcon:r}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:n.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:n.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${n.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:n.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:s.typographyVariantMapping}}}})},n=p("light"),d=p("dark");exports.darkTheme=d,exports.lightTheme=n;
 //# sourceMappingURL=flipdishPublicTheme.cjs.js.map

package/dist/themes/flipdishPublicTheme.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"flipdishPublicTheme.cjs.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { radius } from './tokens/radius/radius';\nimport type { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\n    radius,\n  });\n\n  /* \n    Add mobile text styles to typography\n    Has to be done using media queries, otherwise it isn't responsive :(\n    https://mui.com/material-ui/customization/typography/#responsive-font-sizes \n  */\n  Object.keys(typography).forEach((key) => {\n    // only key before the suffix split by capital letter (h1Strong -> h1)\n    const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n    baseTheme.typography[key] = {\n      ...baseTheme.typography[key],\n      [baseTheme.breakpoints.down('md')]: {\n        ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n      },\n    };\n  });\n\n  // Create final theme with component overrides and additional configurations\n  return createTheme(baseTheme as ThemeOptions, {\n    shape: {\n      borderRadius: '4px',\n    },\n    components: {\n      MuiAlert: {\n        defaultProps: {\n          components: {\n            CloseIcon: CancelIcon,\n          },\n        },\n        styleOverrides: {\n          root: {\n            // TODO: Replace with borderRadius from tokens when implemented\n            borderRadius: '8px',\n            // TODO: Replace with spacing from tokens when implemented\n            padding: '24px',\n          },\n          icon: {\n            // TODO: Replace with spacing from tokens when implemented\n            marginRight: '12px',\n            padding: 0,\n          },\n          action: {\n            padding: 0,\n            '& button': {\n              marginTop: '-5px',\n            },\n          },\n          message: {\n            padding: 0,\n          },\n        },\n      },\n      MuiButton: {\n        styleOverrides: {\n          root: {\n            padding: '12px 24px',\n            textTransform: 'none',\n          },\n        },\n      },\n      MuiCard: {\n        styleOverrides: {\n          root: {\n            boxShadow: 'none',\n            borderWidth: '1px',\n            borderStyle: 'solid',\n            borderColor: baseTheme.palette.divider,\n          },\n        },\n      },\n      MuiChip: {\n        styleOverrides: {\n          root: {\n            fontWeight: 'bold',\n            paddingLeft: '6px',\n            paddingRight: '6px',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            '&:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n            },\n            '&:not(:last-child)': {\n              borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n            },\n          },\n        },\n      },\n      MuiTableRow: {\n        styleOverrides: {\n          root: {\n            '&.MuiTableRow-hover:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n              cursor: 'pointer',\n            },\n          },\n        },\n      },\n      MuiTypography: {\n        defaultProps: {\n          variantMapping: typographyVariantMapping,\n        },\n      },\n    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","radius","Object","keys","forEach","key","keyWithoutVariantSuffix","split","breakpoints","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","lightTheme","darkTheme"],"mappings":"6UASA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,YAC5BC,EAAUA,WACVC,QAAkB,UAATJ,EAAmBK,EAAAA,aAAeC,EAAWA,mBACtDC,EAAMA,SAoBR,OAZAC,OAAOC,KAAKN,EAAAA,YAAYO,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACvDZ,EAAUE,WAAWQ,GAAO,IACvBV,EAAUE,WAAWQ,GACxB,CAACV,EAAUa,YAAYC,KAAK,OAAQ,IAC/BC,EAAAA,mBAAmBJ,IAEzB,IAIIV,EAAYD,EAA2B,CAC5CgB,MAAO,CACLC,aAAc,OAEhBC,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAW,CACTR,eAAgB,CACdC,KAAM,CACJC,QAAS,YACTO,cAAe,UAIrBC,QAAS,CACPV,eAAgB,CACdC,KAAM,CACJU,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAarC,EAAUG,QAAQmC,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiB5C,EAAUG,QAAQ0C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAa/C,EAAUG,QAAQ0C,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiB5C,EAAUG,QAAQ0C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb/B,aAAc,CACZgC,eAAgBC,EAAwBA,6BAI9C,EAGSC,EAAaxD,EAA2B,SACxCyD,EAAYzD,EAA2B"}
+{"version":3,"file":"flipdishPublicTheme.cjs.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { breakpointValues } from './tokens/breakpoints/breakpoints';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { radius } from './tokens/radius/radius';\nimport type { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\n    radius,\n    breakpoints: {\n      values: breakpointValues,\n    },\n  });\n\n  /* \n    Add mobile text styles to typography\n    Has to be done using media queries, otherwise it isn't responsive :(\n    https://mui.com/material-ui/customization/typography/#responsive-font-sizes \n  */\n  Object.keys(typography).forEach((key) => {\n    // only key before the suffix split by capital letter (h1Strong -> h1)\n    const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n    baseTheme.typography[key] = {\n      ...baseTheme.typography[key],\n      [baseTheme.breakpoints.down('tablet')]: {\n        ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n      },\n    };\n  });\n\n  // Create final theme with component overrides and additional configurations\n  return createTheme(baseTheme as ThemeOptions, {\n    shape: {\n      borderRadius: '4px',\n    },\n    components: {\n      MuiAlert: {\n        defaultProps: {\n          components: {\n            CloseIcon: CancelIcon,\n          },\n        },\n        styleOverrides: {\n          root: {\n            // TODO: Replace with borderRadius from tokens when implemented\n            borderRadius: '8px',\n            // TODO: Replace with spacing from tokens when implemented\n            padding: '24px',\n          },\n          icon: {\n            // TODO: Replace with spacing from tokens when implemented\n            marginRight: '12px',\n            padding: 0,\n          },\n          action: {\n            padding: 0,\n            '& button': {\n              marginTop: '-5px',\n            },\n          },\n          message: {\n            padding: 0,\n          },\n        },\n      },\n      MuiButton: {\n        styleOverrides: {\n          root: {\n            padding: '12px 24px',\n            textTransform: 'none',\n          },\n        },\n      },\n      MuiCard: {\n        styleOverrides: {\n          root: {\n            boxShadow: 'none',\n            borderWidth: '1px',\n            borderStyle: 'solid',\n            borderColor: baseTheme.palette.divider,\n          },\n        },\n      },\n      MuiChip: {\n        styleOverrides: {\n          root: {\n            fontWeight: 'bold',\n            paddingLeft: '6px',\n            paddingRight: '6px',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            '&:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n            },\n            '&:not(:last-child)': {\n              borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n            },\n          },\n        },\n      },\n      MuiTableRow: {\n        styleOverrides: {\n          root: {\n            '&.MuiTableRow-hover:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n              cursor: 'pointer',\n            },\n          },\n        },\n      },\n      MuiTypography: {\n        defaultProps: {\n          variantMapping: typographyVariantMapping,\n        },\n      },\n    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","radius","breakpoints","values","breakpointValues","Object","keys","forEach","key","keyWithoutVariantSuffix","split","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","lightTheme","darkTheme"],"mappings":"kYAUA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,YAC5BC,EAAUA,WACVC,QAAkB,UAATJ,EAAmBK,EAAAA,aAAeC,EAAWA,mBACtDC,EAAMA,OACNC,YAAa,CACXC,OAAQC,EAAgBA,oBAqB5B,OAZAC,OAAOC,KAAKT,EAAAA,YAAYU,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACvDf,EAAUE,WAAWW,GAAO,IACvBb,EAAUE,WAAWW,GACxB,CAACb,EAAUO,YAAYS,KAAK,WAAY,IACnCC,EAAAA,mBAAmBH,IAEzB,IAIIb,EAAYD,EAA2B,CAC5CkB,MAAO,CACLC,aAAc,OAEhBC,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAW,CACTR,eAAgB,CACdC,KAAM,CACJC,QAAS,YACTO,cAAe,UAIrBC,QAAS,CACPV,eAAgB,CACdC,KAAM,CACJU,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAavC,EAAUG,QAAQqC,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiB9C,EAAUG,QAAQ4C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAajD,EAAUG,QAAQ4C,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiB9C,EAAUG,QAAQ4C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb/B,aAAc,CACZgC,eAAgBC,EAAwBA,6BAI9C,EAGSC,EAAa1D,EAA2B,SACxC2D,EAAY3D,EAA2B"}

package/dist/themes/flipdishPublicTheme.js

@@ -1,2 +1,2 @@
-import o from"@mui/material/styles/createTheme";import r from"../icons/Cancel/index.js";import"./tokens/colours/primitives.js";import{lightColours as t,darkColours as e}from"./tokens/colours/semantic.js";import{radius as i}from"./tokens/radius/radius.js";import{typographyVariantMapping as s}from"./tokens/typography/variant-mapping.js";import{typography as a,getMobileTextStyle as p}from"./typography.js";const n=n=>{const d=o({typography:a,palette:"light"===n?t:e,radius:i});return Object.keys(a).forEach((o=>{const r=o.split(/(?=[A-Z])/)[0];d.typography[o]={...d.typography[o],[d.breakpoints.down("md")]:{...p(r)}}})),o(d,{shape:{borderRadius:"4px"},components:{MuiAlert:{defaultProps:{components:{CloseIcon:r}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:d.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:d.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${d.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:d.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:s}}}})},d=n("light"),l=n("dark");export{l as darkTheme,d as lightTheme};
+import o from"@mui/material/styles/createTheme";import r from"../icons/Cancel/index.js";import{breakpointValues as t}from"./tokens/breakpoints/breakpoints.js";import"./tokens/colours/primitives.js";import{lightColours as e,darkColours as i}from"./tokens/colours/semantic.js";import{radius as s}from"./tokens/radius/radius.js";import{typographyVariantMapping as a}from"./tokens/typography/variant-mapping.js";import{typography as p,getMobileTextStyle as n}from"./typography.js";const d=d=>{const l=o({typography:p,palette:"light"===d?e:i,radius:s,breakpoints:{values:t}});return Object.keys(p).forEach((o=>{const r=o.split(/(?=[A-Z])/)[0];l.typography[o]={...l.typography[o],[l.breakpoints.down("tablet")]:{...n(r)}}})),o(l,{shape:{borderRadius:"4px"},components:{MuiAlert:{defaultProps:{components:{CloseIcon:r}},styleOverrides:{root:{borderRadius:"8px",padding:"24px"},icon:{marginRight:"12px",padding:0},action:{padding:0,"& button":{marginTop:"-5px"}},message:{padding:0}}},MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:l.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:l.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${l.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:l.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}},MuiTypography:{defaultProps:{variantMapping:a}}}})},l=d("light"),m=d("dark");export{m as darkTheme,l as lightTheme};
 //# sourceMappingURL=flipdishPublicTheme.js.map

package/dist/themes/flipdishPublicTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"flipdishPublicTheme.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { radius } from './tokens/radius/radius';\nimport type { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\n    radius,\n  });\n\n  /* \n    Add mobile text styles to typography\n    Has to be done using media queries, otherwise it isn't responsive :(\n    https://mui.com/material-ui/customization/typography/#responsive-font-sizes \n  */\n  Object.keys(typography).forEach((key) => {\n    // only key before the suffix split by capital letter (h1Strong -> h1)\n    const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n    baseTheme.typography[key] = {\n      ...baseTheme.typography[key],\n      [baseTheme.breakpoints.down('md')]: {\n        ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n      },\n    };\n  });\n\n  // Create final theme with component overrides and additional configurations\n  return createTheme(baseTheme as ThemeOptions, {\n    shape: {\n      borderRadius: '4px',\n    },\n    components: {\n      MuiAlert: {\n        defaultProps: {\n          components: {\n            CloseIcon: CancelIcon,\n          },\n        },\n        styleOverrides: {\n          root: {\n            // TODO: Replace with borderRadius from tokens when implemented\n            borderRadius: '8px',\n            // TODO: Replace with spacing from tokens when implemented\n            padding: '24px',\n          },\n          icon: {\n            // TODO: Replace with spacing from tokens when implemented\n            marginRight: '12px',\n            padding: 0,\n          },\n          action: {\n            padding: 0,\n            '& button': {\n              marginTop: '-5px',\n            },\n          },\n          message: {\n            padding: 0,\n          },\n        },\n      },\n      MuiButton: {\n        styleOverrides: {\n          root: {\n            padding: '12px 24px',\n            textTransform: 'none',\n          },\n        },\n      },\n      MuiCard: {\n        styleOverrides: {\n          root: {\n            boxShadow: 'none',\n            borderWidth: '1px',\n            borderStyle: 'solid',\n            borderColor: baseTheme.palette.divider,\n          },\n        },\n      },\n      MuiChip: {\n        styleOverrides: {\n          root: {\n            fontWeight: 'bold',\n            paddingLeft: '6px',\n            paddingRight: '6px',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            '&:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n            },\n            '&:not(:last-child)': {\n              borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n            },\n          },\n        },\n      },\n      MuiTableRow: {\n        styleOverrides: {\n          root: {\n            '&.MuiTableRow-hover:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n              cursor: 'pointer',\n            },\n          },\n        },\n      },\n      MuiTypography: {\n        defaultProps: {\n          variantMapping: typographyVariantMapping,\n        },\n      },\n    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","radius","Object","keys","forEach","key","keyWithoutVariantSuffix","split","breakpoints","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","lightTheme","darkTheme"],"mappings":"sZASA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,CAC5BC,aACAC,QAAkB,UAATJ,EAAmBK,EAAeC,EAC3CC,WAoBF,OAZAC,OAAOC,KAAKN,GAAYO,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACvDZ,EAAUE,WAAWQ,GAAO,IACvBV,EAAUE,WAAWQ,GACxB,CAACV,EAAUa,YAAYC,KAAK,OAAQ,IAC/BC,EAAmBJ,IAEzB,IAIIV,EAAYD,EAA2B,CAC5CgB,MAAO,CACLC,aAAc,OAEhBC,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAW,CACTR,eAAgB,CACdC,KAAM,CACJC,QAAS,YACTO,cAAe,UAIrBC,QAAS,CACPV,eAAgB,CACdC,KAAM,CACJU,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAarC,EAAUG,QAAQmC,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiB5C,EAAUG,QAAQ0C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAa/C,EAAUG,QAAQ0C,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiB5C,EAAUG,QAAQ0C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb/B,aAAc,CACZgC,eAAgBC,MAItB,EAGSC,EAAaxD,EAA2B,SACxCyD,EAAYzD,EAA2B"}
+{"version":3,"file":"flipdishPublicTheme.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type Theme, type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { breakpointValues } from './tokens/breakpoints/breakpoints';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { radius } from './tokens/radius/radius';\nimport type { fontSize } from './tokens/typography/font-size';\nimport { typographyVariantMapping } from './tokens/typography/variant-mapping';\nimport { getMobileTextStyle, typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light'): Theme => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\n    radius,\n    breakpoints: {\n      values: breakpointValues,\n    },\n  });\n\n  /* \n    Add mobile text styles to typography\n    Has to be done using media queries, otherwise it isn't responsive :(\n    https://mui.com/material-ui/customization/typography/#responsive-font-sizes \n  */\n  Object.keys(typography).forEach((key) => {\n    // only key before the suffix split by capital letter (h1Strong -> h1)\n    const keyWithoutVariantSuffix = key.split(/(?=[A-Z])/)[0];\n    baseTheme.typography[key] = {\n      ...baseTheme.typography[key],\n      [baseTheme.breakpoints.down('tablet')]: {\n        ...getMobileTextStyle(keyWithoutVariantSuffix as keyof (typeof fontSize)['mobile']),\n      },\n    };\n  });\n\n  // Create final theme with component overrides and additional configurations\n  return createTheme(baseTheme as ThemeOptions, {\n    shape: {\n      borderRadius: '4px',\n    },\n    components: {\n      MuiAlert: {\n        defaultProps: {\n          components: {\n            CloseIcon: CancelIcon,\n          },\n        },\n        styleOverrides: {\n          root: {\n            // TODO: Replace with borderRadius from tokens when implemented\n            borderRadius: '8px',\n            // TODO: Replace with spacing from tokens when implemented\n            padding: '24px',\n          },\n          icon: {\n            // TODO: Replace with spacing from tokens when implemented\n            marginRight: '12px',\n            padding: 0,\n          },\n          action: {\n            padding: 0,\n            '& button': {\n              marginTop: '-5px',\n            },\n          },\n          message: {\n            padding: 0,\n          },\n        },\n      },\n      MuiButton: {\n        styleOverrides: {\n          root: {\n            padding: '12px 24px',\n            textTransform: 'none',\n          },\n        },\n      },\n      MuiCard: {\n        styleOverrides: {\n          root: {\n            boxShadow: 'none',\n            borderWidth: '1px',\n            borderStyle: 'solid',\n            borderColor: baseTheme.palette.divider,\n          },\n        },\n      },\n      MuiChip: {\n        styleOverrides: {\n          root: {\n            fontWeight: 'bold',\n            paddingLeft: '6px',\n            paddingRight: '6px',\n          },\n        },\n      },\n      MuiListItemButton: {\n        styleOverrides: {\n          root: {\n            '&:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-primary-weak'],\n            },\n            '&:not(:last-child)': {\n              borderBottom: `1px solid ${baseTheme.palette.semantic.stroke['stroke-weak']}`,\n            },\n          },\n        },\n      },\n      MuiTableRow: {\n        styleOverrides: {\n          root: {\n            '&.MuiTableRow-hover:hover': {\n              backgroundColor: baseTheme.palette.semantic.fill['fill-secondary'],\n              cursor: 'pointer',\n            },\n          },\n        },\n      },\n      MuiTypography: {\n        defaultProps: {\n          variantMapping: typographyVariantMapping,\n        },\n      },\n    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","radius","breakpoints","values","breakpointValues","Object","keys","forEach","key","keyWithoutVariantSuffix","split","down","getMobileTextStyle","shape","borderRadius","components","MuiAlert","defaultProps","CloseIcon","CancelIcon","styleOverrides","root","padding","icon","marginRight","action","marginTop","message","MuiButton","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","MuiTypography","variantMapping","typographyVariantMapping","lightTheme","darkTheme"],"mappings":"6dAUA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,CAC5BC,aACAC,QAAkB,UAATJ,EAAmBK,EAAeC,EAC3CC,SACAC,YAAa,CACXC,OAAQC,KAqBZ,OAZAC,OAAOC,KAAKT,GAAYU,SAASC,IAE/B,MAAMC,EAA0BD,EAAIE,MAAM,aAAa,GACvDf,EAAUE,WAAWW,GAAO,IACvBb,EAAUE,WAAWW,GACxB,CAACb,EAAUO,YAAYS,KAAK,WAAY,IACnCC,EAAmBH,IAEzB,IAIIb,EAAYD,EAA2B,CAC5CkB,MAAO,CACLC,aAAc,OAEhBC,WAAY,CACVC,SAAU,CACRC,aAAc,CACZF,WAAY,CACVG,UAAWC,IAGfC,eAAgB,CACdC,KAAM,CAEJP,aAAc,MAEdQ,QAAS,QAEXC,KAAM,CAEJC,YAAa,OACbF,QAAS,GAEXG,OAAQ,CACNH,QAAS,EACT,WAAY,CACVI,UAAW,SAGfC,QAAS,CACPL,QAAS,KAIfM,UAAW,CACTR,eAAgB,CACdC,KAAM,CACJC,QAAS,YACTO,cAAe,UAIrBC,QAAS,CACPV,eAAgB,CACdC,KAAM,CACJU,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAavC,EAAUG,QAAQqC,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiB9C,EAAUG,QAAQ4C,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAajD,EAAUG,QAAQ4C,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiB9C,EAAUG,QAAQ4C,SAASC,KAAK,kBACjDI,OAAQ,cAKhBC,cAAe,CACb/B,aAAc,CACZgC,eAAgBC,MAItB,EAGSC,EAAa1D,EAA2B,SACxC2D,EAAY3D,EAA2B"}

package/dist/themes/tokens/breakpoints/breakpoints.cjs.js

@@ -0,0 +1,2 @@
+"use strict";exports.breakpointValues={base:0,mobile:375,tablet:768,laptop:1240,desktop:1440,widescreen:1920},exports.breakpoints={"breakpoint-base":"0px","breakpoint-mobile":"375px","breakpoint-tablet":"768px","breakpoint-laptop":"1240px","breakpoint-desktop":"1440px","breakpoint-widescreen":"1920px"};
+//# sourceMappingURL=breakpoints.cjs.js.map

package/dist/themes/tokens/breakpoints/breakpoints.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.cjs.js","sources":["../../../../src/themes/tokens/breakpoints/breakpoints.ts"],"sourcesContent":["export const breakpoints = {\n  'breakpoint-base': '0px',\n  'breakpoint-mobile': '375px',\n  'breakpoint-tablet': '768px',\n  'breakpoint-laptop': '1240px',\n  'breakpoint-desktop': '1440px',\n  'breakpoint-widescreen': '1920px',\n} as const;\n\nexport type BreakpointToken = keyof typeof breakpoints;\n\n// MUI breakpoint values in pixels (without units)\nexport const breakpointValues = {\n  base: 0,\n  mobile: 375,\n  tablet: 768,\n  laptop: 1240,\n  desktop: 1440,\n  widescreen: 1920,\n};\n"],"names":["base","mobile","tablet","laptop","desktop","widescreen"],"mappings":"sCAYgC,CAC9BA,KAAM,EACNC,OAAQ,IACRC,OAAQ,IACRC,OAAQ,KACRC,QAAS,KACTC,WAAY,0BAlBa,CACzB,kBAAmB,MACnB,oBAAqB,QACrB,oBAAqB,QACrB,oBAAqB,SACrB,qBAAsB,SACtB,wBAAyB"}

package/dist/themes/tokens/breakpoints/breakpoints.d.ts

@@ -0,0 +1,20 @@
+declare const breakpoints: {
+    readonly 'breakpoint-base': "0px";
+    readonly 'breakpoint-mobile': "375px";
+    readonly 'breakpoint-tablet': "768px";
+    readonly 'breakpoint-laptop': "1240px";
+    readonly 'breakpoint-desktop': "1440px";
+    readonly 'breakpoint-widescreen': "1920px";
+};
+type BreakpointToken = keyof typeof breakpoints;
+declare const breakpointValues: {
+    base: number;
+    mobile: number;
+    tablet: number;
+    laptop: number;
+    desktop: number;
+    widescreen: number;
+};
+
+export { breakpointValues, breakpoints };
+export type { BreakpointToken };

package/dist/themes/tokens/breakpoints/breakpoints.js

@@ -0,0 +1,2 @@
+const e={"breakpoint-base":"0px","breakpoint-mobile":"375px","breakpoint-tablet":"768px","breakpoint-laptop":"1240px","breakpoint-desktop":"1440px","breakpoint-widescreen":"1920px"},p={base:0,mobile:375,tablet:768,laptop:1240,desktop:1440,widescreen:1920};export{p as breakpointValues,e as breakpoints};
+//# sourceMappingURL=breakpoints.js.map

package/dist/themes/tokens/breakpoints/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../../src/themes/tokens/breakpoints/breakpoints.ts"],"sourcesContent":["export const breakpoints = {\n  'breakpoint-base': '0px',\n  'breakpoint-mobile': '375px',\n  'breakpoint-tablet': '768px',\n  'breakpoint-laptop': '1240px',\n  'breakpoint-desktop': '1440px',\n  'breakpoint-widescreen': '1920px',\n} as const;\n\nexport type BreakpointToken = keyof typeof breakpoints;\n\n// MUI breakpoint values in pixels (without units)\nexport const breakpointValues = {\n  base: 0,\n  mobile: 375,\n  tablet: 768,\n  laptop: 1240,\n  desktop: 1440,\n  widescreen: 1920,\n};\n"],"names":["breakpoints","breakpointValues","base","mobile","tablet","laptop","desktop","widescreen"],"mappings":"AAAa,MAAAA,EAAc,CACzB,kBAAmB,MACnB,oBAAqB,QACrB,oBAAqB,QACrB,oBAAqB,SACrB,qBAAsB,SACtB,wBAAyB,UAMdC,EAAmB,CAC9BC,KAAM,EACNC,OAAQ,IACRC,OAAQ,IACRC,OAAQ,KACRC,QAAS,KACTC,WAAY"}

package/dist/themes/tokens/spacing/spacing.cjs.js

@@ -1,2 +1,2 @@
-"use strict";exports.spacing={"spacing-0":"0px","spacing-4":"4px","spacing-8":"8px","spacing-12":"12px","spacing-16":"16px","spacing-20":"20px","spacing-24":"24px","spacing-32":"32px","spacing-40":"40px","spacing-48":"48px","spacing-56":"56px","spacing-64":"64px","spacing-96":"96px","spacing-128":"128px","spacing-192":"192px","spacing-256":"256px"};
+"use strict";exports.spacing={"spacing-0":"0px","spacing-4":"4px","spacing-8":"8px","spacing-12":"12px","spacing-16":"16px","spacing-20":"20px","spacing-24":"24px","spacing-32":"32px","spacing-40":"40px","spacing-48":"48px","spacing-56":"56px","spacing-64":"64px","spacing-80":"80px","spacing-96":"96px","spacing-128":"128px","spacing-192":"192px","spacing-256":"256px"};
 //# sourceMappingURL=spacing.cjs.js.map

package/dist/themes/tokens/spacing/spacing.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.cjs.js","sources":["../../../../src/themes/tokens/spacing/spacing.ts"],"sourcesContent":["export const spacing = {\n  'spacing-0': '0px',\n  'spacing-4': '4px',\n  'spacing-8': '8px',\n  'spacing-12': '12px',\n  'spacing-16': '16px',\n  'spacing-20': '20px',\n  'spacing-24': '24px',\n  'spacing-32': '32px',\n  'spacing-40': '40px',\n  'spacing-48': '48px',\n  'spacing-56': '56px',\n  'spacing-64': '64px',\n  'spacing-96': '96px',\n  'spacing-128': '128px',\n  'spacing-192': '192px',\n  'spacing-256': '256px',\n} as const;\n\nexport type SpacingToken = keyof typeof spacing;\n"],"names":[],"mappings":"6BAAuB,CACrB,YAAa,MACb,YAAa,MACb,YAAa,MACb,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,cAAe,QACf,cAAe,QACf,cAAe"}
+{"version":3,"file":"spacing.cjs.js","sources":["../../../../src/themes/tokens/spacing/spacing.ts"],"sourcesContent":["export const spacing = {\n  'spacing-0': '0px',\n  'spacing-4': '4px',\n  'spacing-8': '8px',\n  'spacing-12': '12px',\n  'spacing-16': '16px',\n  'spacing-20': '20px',\n  'spacing-24': '24px',\n  'spacing-32': '32px',\n  'spacing-40': '40px',\n  'spacing-48': '48px',\n  'spacing-56': '56px',\n  'spacing-64': '64px',\n  'spacing-80': '80px',\n  'spacing-96': '96px',\n  'spacing-128': '128px',\n  'spacing-192': '192px',\n  'spacing-256': '256px',\n} as const;\n\nexport type SpacingToken = keyof typeof spacing;\n"],"names":[],"mappings":"6BAAuB,CACrB,YAAa,MACb,YAAa,MACb,YAAa,MACb,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,cAAe,QACf,cAAe,QACf,cAAe"}

package/dist/themes/tokens/spacing/spacing.d.ts

@@ -11,6 +11,7 @@ declare const spacing: {
     readonly 'spacing-48': "48px";
     readonly 'spacing-56': "56px";
     readonly 'spacing-64': "64px";
+    readonly 'spacing-80': "80px";
     readonly 'spacing-96': "96px";
     readonly 'spacing-128': "128px";
     readonly 'spacing-192': "192px";

package/dist/themes/tokens/spacing/spacing.js

@@ -1,2 +1,2 @@
-const p={"spacing-0":"0px","spacing-4":"4px","spacing-8":"8px","spacing-12":"12px","spacing-16":"16px","spacing-20":"20px","spacing-24":"24px","spacing-32":"32px","spacing-40":"40px","spacing-48":"48px","spacing-56":"56px","spacing-64":"64px","spacing-96":"96px","spacing-128":"128px","spacing-192":"192px","spacing-256":"256px"};export{p as spacing};
+const p={"spacing-0":"0px","spacing-4":"4px","spacing-8":"8px","spacing-12":"12px","spacing-16":"16px","spacing-20":"20px","spacing-24":"24px","spacing-32":"32px","spacing-40":"40px","spacing-48":"48px","spacing-56":"56px","spacing-64":"64px","spacing-80":"80px","spacing-96":"96px","spacing-128":"128px","spacing-192":"192px","spacing-256":"256px"};export{p as spacing};
 //# sourceMappingURL=spacing.js.map

package/dist/themes/tokens/spacing/spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.js","sources":["../../../../src/themes/tokens/spacing/spacing.ts"],"sourcesContent":["export const spacing = {\n  'spacing-0': '0px',\n  'spacing-4': '4px',\n  'spacing-8': '8px',\n  'spacing-12': '12px',\n  'spacing-16': '16px',\n  'spacing-20': '20px',\n  'spacing-24': '24px',\n  'spacing-32': '32px',\n  'spacing-40': '40px',\n  'spacing-48': '48px',\n  'spacing-56': '56px',\n  'spacing-64': '64px',\n  'spacing-96': '96px',\n  'spacing-128': '128px',\n  'spacing-192': '192px',\n  'spacing-256': '256px',\n} as const;\n\nexport type SpacingToken = keyof typeof spacing;\n"],"names":["spacing"],"mappings":"AAAa,MAAAA,EAAU,CACrB,YAAa,MACb,YAAa,MACb,YAAa,MACb,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,cAAe,QACf,cAAe,QACf,cAAe"}
+{"version":3,"file":"spacing.js","sources":["../../../../src/themes/tokens/spacing/spacing.ts"],"sourcesContent":["export const spacing = {\n  'spacing-0': '0px',\n  'spacing-4': '4px',\n  'spacing-8': '8px',\n  'spacing-12': '12px',\n  'spacing-16': '16px',\n  'spacing-20': '20px',\n  'spacing-24': '24px',\n  'spacing-32': '32px',\n  'spacing-40': '40px',\n  'spacing-48': '48px',\n  'spacing-56': '56px',\n  'spacing-64': '64px',\n  'spacing-80': '80px',\n  'spacing-96': '96px',\n  'spacing-128': '128px',\n  'spacing-192': '192px',\n  'spacing-256': '256px',\n} as const;\n\nexport type SpacingToken = keyof typeof spacing;\n"],"names":["spacing"],"mappings":"AAAa,MAAAA,EAAU,CACrB,YAAa,MACb,YAAa,MACb,YAAa,MACb,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,aAAc,OACd,cAAe,QACf,cAAe,QACf,cAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "2.1.5",
+  "version": "3.1.0",
   "files": [
     "dist"
   ],
@@ -40,8 +40,8 @@
     "@actions/core": "^1.11.1",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@mui/icons-material": "6.4.10",
-    "@mui/material": "6.4.10",
+    "@mui/icons-material": "6.4.11",
+    "@mui/material": "6.4.11",
     "@mui/x-date-pickers": "^7.23.3",
     "@tanstack/react-query": "^5.62.0",
     "formik": "^2.4.6",
@@ -78,11 +78,11 @@
     "@tanstack/react-query": "^5.62.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "15.0.7",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react": "18.3.21",
+    "@types/react-dom": "18.3.7",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
-    "@vitejs/plugin-react-swc": "3.8.1",
+    "@vitejs/plugin-react-swc": "3.9.0",
     "chromatic": "^11.25.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.56.0",
@@ -93,7 +93,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.19",
+    "eslint-plugin-react-refresh": "0.4.20",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-testing-library": "^7.1.1",
@@ -109,7 +109,7 @@
     "storybook": "^8.6.7",
     "tslib": "^2.8.0",
     "typescript": "5.4.5",
-    "vite": "5.4.16",
+    "vite": "5.4.19",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "1.6.1"
   },