@flipdish/portal-library 2.1.0 → 2.1.1

package/dist/components/Button/index.d.ts

@@ -1,2 +1,6 @@
 import Button from '@mui/material/Button';
 export { default } from '@mui/material/Button';
+
+type ButtonType = 'primary' | 'secondary' | 'tertiary';
+
+export type { ButtonType };

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),r=require("@mui/material/AlertTitle"),i=require("@mui/material/Box"),n=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),c=require("../../../icons/CheckmarkCircle/index.cjs.js"),o=require("../../../icons/Diamond/index.cjs.js"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("@mui/material/Button");const u={neutral:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(m,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(o,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(o,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-success"]})},x={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],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-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],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-inverse":()=>"transparant","brand-inverse":()=>"transparant"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},p=(e,t)=>u[t](e),k=(e,t)=>x.background[t](e),w=(e,t)=>x.border[t](e),f=(e,t)=>x.header[t](e),b=(e,t)=>x.text[t](e),g=e=>{switch(e){case"primary":return"contained";case"secondary":return"outlined";default:return"text"}},j=n.styled(i)((()=>({marginTop:"16px"}))),v=n.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:k(e,t),border:"1px solid",borderColor:w(e,t),color:b(e,t)}))),y=t.memo((({title:t,description:a,tone:s="neutral",onClose:l,className:c,"data-testid":o,action:m})=>{const u=n.useTheme();return e.jsxs(v,{"aria-describedby":`alert-description-${o??"default"}`,"aria-labelledby":`alert-title-${o??"default"}`,className:c,"data-testid":o,icon:p(u,s),role:"alert",tone:s,onClose:l,children:[e.jsx(r,{color:f(u,s),id:`alert-title-${o??"default"}`,children:t}),e.jsx(i,{id:`alert-description-${o??"default"}`,children:a}),(()=>{if(m){const a=m["data-testid"]??`action-button-${m.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(j,{children:e.jsx(d,{"aria-label":`${m.label} - ${t}`,"data-testid":a,size:"small",variant:g(m.type??"primary"),children:m.label})})}})()]})}));y.displayName="Alert",module.exports=y;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nimport { memo } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button, { type ButtonType } from '../../Button';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\n    /** Text label for the action button */\n    label: string;\n    /** Visual style of the action button */\n    type?: ButtonType;\n    /** Callback function when the action button is clicked */\n    onClick: () => void;\n    /** Test ID for the action button */\n    'data-testid'?: string;\n  };\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\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-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\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-inverse': () => 'transparant',\n    'brand-inverse': () => 'transparant',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\nconst getButtonVariant = (type: ButtonType) => {\n  switch (type) {\n    case 'primary':\n      return 'contained';\n    case 'secondary':\n      return 'outlined';\n    default:\n      return 'text';\n  }\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\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, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    tone = 'neutral',\n    onClose,\n    className,\n    'data-testid': dataTestId,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n\n    const renderAction = () => {\n      if (action) {\n        const actionTestId =\n          action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n        return (\n          <StyledActionContainer>\n            <Button\n              aria-label={`${action.label} - ${title}`}\n              data-testid={actionTestId}\n              size=\"small\"\n              variant={getButtonVariant(action.type ?? 'primary')}\n            >\n              {action.label}\n            </Button>\n          </StyledActionContainer>\n        );\n      }\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={`alert-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`alert-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        icon={getIcon(theme, tone)}\n        role=\"alert\"\n        tone={tone}\n        onClose={onClose}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${dataTestId ?? 'default'}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${dataTestId ?? 'default'}`}>{description}</Box>\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","getButtonVariant","type","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","dataTestId","action","useTheme","_jsxs","jsxs","role","children","MuiAlertTitle","id","actionTestId","label","replace","toLowerCase","Button","size","variant","renderAction","displayName"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonType } from '../../Button/index.js';
+
+/** Visual tone of the alert */
+type AlertTones = 'brand-inverse' | 'brand' | 'destructive' | 'information' | 'neutral-inverse' | 'neutral' | 'success' | 'warning';
+/** Props for the Alert component */
+interface AlertProps {
+    /** Main heading text of the alert */
+    title: string;
+    /** Detailed description text of the alert */
+    description: string;
+    /** Visual tone of the alert */
+    tone?: AlertTones;
+    /** Callback function when the alert is closed */
+    onClose?: () => void;
+    /** Action button configuration */
+    action?: {
+        /** Text label for the action button */
+        label: string;
+        /** Visual style of the action button */
+        type?: ButtonType;
+        /** Callback function when the action button is clicked */
+        onClick: () => void;
+        /** Test ID for the action button */
+        'data-testid'?: string;
+    };
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing and automation */
+    'data-testid'?: string;
+}
+/**
+ * Alert component is used to display important messages or notifications to users.
+ * It supports different visual tones to convey different semantic meanings and can include
+ * an optional action button and close button.
+ *
+ * The component is wrapped with React.memo to optimize performance by preventing unnecessary
+ * re-renders when the component's props haven't changed, which is beneficial for components
+ * that may be used frequently throughout the application.
+ */
+declare const Alert: react.MemoExoticComponent<({ title, description, tone, onClose, className, "data-testid": dataTestId, action, }: AlertProps) => react_jsx_runtime.JSX.Element>;
+
+export { Alert as default };
+export type { AlertProps, AlertTones };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as a}from"react";import r from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import n from"@mui/material/Box";import{styled as o,useTheme as s}from"@mui/material/styles";import l from"../../../icons/Alert/index.js";import c from"../../../icons/CancelCircle/index.js";import m from"../../../icons/CheckmarkCircle/index.js";import p from"../../../icons/Diamond/index.js";import d from"../../../icons/InformationCircle/index.js";import u from"@mui/material/Button";const x={neutral:e=>t(p,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(p,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(c,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(l,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(d,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(m,{color:e.palette.semantic.icon["icon-success"]})},f={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],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-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],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-inverse":()=>"transparant","brand-inverse":()=>"transparant"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},k=(e,t)=>x[t](e),w=(e,t)=>f.background[t](e),b=(e,t)=>f.border[t](e),g=(e,t)=>f.header[t](e),v=(e,t)=>f.text[t](e),y=e=>{switch(e){case"primary":return"contained";case"secondary":return"outlined";default:return"text"}},h=o(n)((()=>({marginTop:"16px"}))),C=o(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:w(e,t),border:"1px solid",borderColor:b(e,t),color:v(e,t)}))),$=a((({title:a,description:r,tone:o="neutral",onClose:l,className:c,"data-testid":m,action:p})=>{const d=s();return e(C,{"aria-describedby":`alert-description-${m??"default"}`,"aria-labelledby":`alert-title-${m??"default"}`,className:c,"data-testid":m,icon:k(d,o),role:"alert",tone:o,onClose:l,children:[t(i,{color:g(d,o),id:`alert-title-${m??"default"}`,children:a}),t(n,{id:`alert-description-${m??"default"}`,children:r}),(()=>{if(p){const e=p["data-testid"]??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return t(h,{children:t(u,{"aria-label":`${p.label} - ${a}`,"data-testid":e,size:"small",variant:y(p.type??"primary"),children:p.label})})}})()]})}));$.displayName="Alert";export{$ as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nimport { memo } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button, { type ButtonType } from '../../Button';\n\n/** Visual tone of the alert */\nexport type AlertTones =\n  | 'brand-inverse'\n  | 'brand'\n  | 'destructive'\n  | 'information'\n  | 'neutral-inverse'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\n/** Props for the Alert component */\nexport interface AlertProps {\n  /** Main heading text of the alert */\n  title: string;\n  /** Detailed description text of the alert */\n  description: string;\n  /** Visual tone of the alert */\n  tone?: AlertTones;\n  /** Callback function when the alert is closed */\n  onClose?: () => void;\n  /** Action button configuration */\n  action?: {\n    /** Text label for the action button */\n    label: string;\n    /** Visual style of the action button */\n    type?: ButtonType;\n    /** Callback function when the action button is clicked */\n    onClick: () => void;\n    /** Test ID for the action button */\n    'data-testid'?: string;\n  };\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n}\n\nconst ICONS = {\n  neutral: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n  brand: (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n  destructive: (theme: Theme) => <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />,\n  warning: (theme: Theme) => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n  information: (theme: Theme) => (\n    <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n  ),\n  'neutral-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  'brand-inverse': (theme: Theme) => <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />,\n  success: (theme: Theme) => <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />,\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\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-inverse': (theme: Theme) => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\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-inverse': () => 'transparant',\n    'brand-inverse': () => 'transparant',\n  },\n  header: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-strong'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-strong'],\n  },\n  text: {\n    neutral: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme) => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme) => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n  return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n  return COLOURS.text[tone](theme);\n};\n\nconst getButtonVariant = (type: ButtonType) => {\n  switch (type) {\n    case 'primary':\n      return 'contained';\n    case 'secondary':\n      return 'outlined';\n    default:\n      return 'text';\n  }\n};\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n  marginTop: '16px',\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  backgroundColor: getBackgroundColour(theme, tone),\n  border: '1px solid',\n  borderColor: getBorderColour(theme, tone),\n  color: getTextColour(theme, tone),\n}));\n\n/**\n * Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\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, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n  ({\n    title,\n    description,\n    tone = 'neutral',\n    onClose,\n    className,\n    'data-testid': dataTestId,\n    action,\n  }: AlertProps) => {\n    const theme = useTheme();\n\n    const renderAction = () => {\n      if (action) {\n        const actionTestId =\n          action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n        return (\n          <StyledActionContainer>\n            <Button\n              aria-label={`${action.label} - ${title}`}\n              data-testid={actionTestId}\n              size=\"small\"\n              variant={getButtonVariant(action.type ?? 'primary')}\n            >\n              {action.label}\n            </Button>\n          </StyledActionContainer>\n        );\n      }\n    };\n\n    return (\n      <StyledAlert\n        aria-describedby={`alert-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`alert-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        icon={getIcon(theme, tone)}\n        role=\"alert\"\n        tone={tone}\n        onClose={onClose}\n      >\n        <MuiAlertTitle color={getHeaderColour(theme, tone)} id={`alert-title-${dataTestId ?? 'default'}`}>\n          {title}\n        </MuiAlertTitle>\n        <Box id={`alert-description-${dataTestId ?? 'default'}`}>{description}</Box>\n        {renderAction()}\n      </StyledAlert>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","getButtonVariant","type","StyledActionContainer","styled","Box","marginTop","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","onClose","className","dataTestId","action","useTheme","_jsxs","role","children","MuiAlertTitle","id","actionTestId","label","replace","toLowerCase","Button","size","variant","renderAction","displayName"],"mappings":"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"}

package/dist/themes/flipdishPublicTheme.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/styles/createTheme");require("./tokens/colours/primitives.cjs.js");var r=require("./tokens/colours/semantic.cjs.js"),o=require("./typography.cjs.js");const t=t=>{const i=e({typography:o.typography,palette:"light"===t?r.lightColours:r.darkColours});return e(i,{shape:{borderRadius:"4px"},components:{MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:i.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:i.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${i.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:i.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}}}})},i=t("light"),s=t("dark");exports.darkTheme=s,exports.lightTheme=i;
+"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("./typography.cjs.js");const i=i=>{const s=e({typography:t.typography,palette:"light"===i?o.lightColours:o.darkColours});return e(s,{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:s.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:s.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${s.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:s.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}}}})},s=i("light"),a=i("dark");exports.darkTheme=a,exports.lightTheme=s;
 //# 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 ThemeOptions } from '@mui/material/styles/createTheme';\nimport { lightColours, darkColours } from './tokens/colours';\nimport { typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'light' | 'dark') => {\n    const baseTheme = createTheme({\n        typography,\n        palette: mode === 'light' ? lightColours : darkColours,\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            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        },\n    });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","shape","borderRadius","components","MuiButton","styleOverrides","root","padding","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","lightTheme","darkTheme"],"mappings":"gMAIA,MAAMA,EAA8BC,IAChC,MAAMC,EAAYC,EAAY,YAC1BC,EAAUA,WACVC,QAAkB,UAATJ,EAAmBK,EAAAA,aAAeC,EAAWA,cAI1D,OAAOJ,EAAYD,EAA2B,CAC1CM,MAAO,CACHC,aAAc,OAElBC,WAAY,CACRC,UAAW,CACPC,eAAgB,CACZC,KAAM,CACFC,QAAS,YACTC,cAAe,UAI3BC,QAAS,CACLJ,eAAgB,CACZC,KAAM,CACFI,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAalB,EAAUG,QAAQgB,WAI3CC,QAAS,CACLV,eAAgB,CACZC,KAAM,CACFU,WAAY,OACZC,YAAa,MACbC,aAAc,SAI1BC,kBAAmB,CACfd,eAAgB,CACZC,KAAM,CACF,UAAW,CACPc,gBAAiBzB,EAAUG,QAAQuB,SAASC,KAAK,sBAErD,qBAAsB,CAClBC,aAAc,aAAa5B,EAAUG,QAAQuB,SAASG,OAAO,qBAK7EC,YAAa,CACTpB,eAAgB,CACZC,KAAM,CACF,4BAA6B,CACzBc,gBAAiBzB,EAAUG,QAAQuB,SAASC,KAAK,kBACjDI,OAAQ,gBAM9B,EAGOC,EAAalC,EAA2B,SACxCmC,EAAYnC,EAA2B"}
+{"version":3,"file":"flipdishPublicTheme.cjs.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light') => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\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    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","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","lightTheme","darkTheme"],"mappings":"0OAMA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,YAC5BC,EAAUA,WACVC,QAAkB,UAATJ,EAAmBK,EAAAA,aAAeC,EAAWA,cAIxD,OAAOJ,EAAYD,EAA2B,CAC5CM,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,YAAa3B,EAAUG,QAAQyB,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiBlC,EAAUG,QAAQgC,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAarC,EAAUG,QAAQgC,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiBlC,EAAUG,QAAQgC,SAASC,KAAK,kBACjDI,OAAQ,gBAMlB,EAGSC,EAAa3C,EAA2B,SACxC4C,EAAY5C,EAA2B"}

package/dist/themes/flipdishPublicTheme.js

@@ -1,2 +1,2 @@
-import o from"@mui/material/styles/createTheme";import"./tokens/colours/primitives.js";import{lightColours as e,darkColours as t}from"./tokens/colours/semantic.js";import{typography as r}from"./typography.js";const i=i=>{const s=o({typography:r,palette:"light"===i?e:t});return o(s,{shape:{borderRadius:"4px"},components:{MuiButton:{styleOverrides:{root:{padding:"12px 24px",textTransform:"none"}}},MuiCard:{styleOverrides:{root:{boxShadow:"none",borderWidth:"1px",borderStyle:"solid",borderColor:s.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:s.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${s.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:s.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}}}})},s=i("light"),l=i("dark");export{l as darkTheme,s as lightTheme};
+import o from"@mui/material/styles/createTheme";import e from"../icons/Cancel/index.js";import"./tokens/colours/primitives.js";import{lightColours as r,darkColours as t}from"./tokens/colours/semantic.js";import{typography as i}from"./typography.js";const s=s=>{const a=o({typography:i,palette:"light"===s?r:t});return o(a,{shape:{borderRadius:"4px"},components:{MuiAlert:{defaultProps:{components:{CloseIcon:e}},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:a.palette.divider}}},MuiChip:{styleOverrides:{root:{fontWeight:"bold",paddingLeft:"6px",paddingRight:"6px"}}},MuiListItemButton:{styleOverrides:{root:{"&:hover":{backgroundColor:a.palette.semantic.fill["fill-primary-weak"]},"&:not(:last-child)":{borderBottom:`1px solid ${a.palette.semantic.stroke["stroke-weak"]}`}}}},MuiTableRow:{styleOverrides:{root:{"&.MuiTableRow-hover:hover":{backgroundColor:a.palette.semantic.fill["fill-secondary"],cursor:"pointer"}}}}}})},a=s("light"),d=s("dark");export{d as darkTheme,a 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 ThemeOptions } from '@mui/material/styles/createTheme';\nimport { lightColours, darkColours } from './tokens/colours';\nimport { typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'light' | 'dark') => {\n    const baseTheme = createTheme({\n        typography,\n        palette: mode === 'light' ? lightColours : darkColours,\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            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        },\n    });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","shape","borderRadius","components","MuiButton","styleOverrides","root","padding","textTransform","MuiCard","boxShadow","borderWidth","borderStyle","borderColor","divider","MuiChip","fontWeight","paddingLeft","paddingRight","MuiListItemButton","backgroundColor","semantic","fill","borderBottom","stroke","MuiTableRow","cursor","lightTheme","darkTheme"],"mappings":"iNAIA,MAAMA,EAA8BC,IAChC,MAAMC,EAAYC,EAAY,CAC1BC,aACAC,QAAkB,UAATJ,EAAmBK,EAAeC,IAI/C,OAAOJ,EAAYD,EAA2B,CAC1CM,MAAO,CACHC,aAAc,OAElBC,WAAY,CACRC,UAAW,CACPC,eAAgB,CACZC,KAAM,CACFC,QAAS,YACTC,cAAe,UAI3BC,QAAS,CACLJ,eAAgB,CACZC,KAAM,CACFI,UAAW,OACXC,YAAa,MACbC,YAAa,QACbC,YAAalB,EAAUG,QAAQgB,WAI3CC,QAAS,CACLV,eAAgB,CACZC,KAAM,CACFU,WAAY,OACZC,YAAa,MACbC,aAAc,SAI1BC,kBAAmB,CACfd,eAAgB,CACZC,KAAM,CACF,UAAW,CACPc,gBAAiBzB,EAAUG,QAAQuB,SAASC,KAAK,sBAErD,qBAAsB,CAClBC,aAAc,aAAa5B,EAAUG,QAAQuB,SAASG,OAAO,qBAK7EC,YAAa,CACTpB,eAAgB,CACZC,KAAM,CACF,4BAA6B,CACzBc,gBAAiBzB,EAAUG,QAAQuB,SAASC,KAAK,kBACjDI,OAAQ,gBAM9B,EAGOC,EAAalC,EAA2B,SACxCmC,EAAYnC,EAA2B"}
+{"version":3,"file":"flipdishPublicTheme.js","sources":["../../src/themes/flipdishPublicTheme.ts"],"sourcesContent":["import createTheme, { type ThemeOptions } from '@mui/material/styles/createTheme';\n\nimport CancelIcon from '../icons/Cancel';\nimport { darkColours, lightColours } from './tokens/colours';\nimport { typography } from './typography';\n\nconst createFlipdishThemeFactory = (mode: 'dark' | 'light') => {\n  const baseTheme = createTheme({\n    typography,\n    palette: mode === 'light' ? lightColours : darkColours,\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    },\n  });\n};\n\nexport const lightTheme = createFlipdishThemeFactory('light');\nexport const darkTheme = createFlipdishThemeFactory('dark');\n"],"names":["createFlipdishThemeFactory","mode","baseTheme","createTheme","typography","palette","lightColours","darkColours","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","lightTheme","darkTheme"],"mappings":"yPAMA,MAAMA,EAA8BC,IAClC,MAAMC,EAAYC,EAAY,CAC5BC,aACAC,QAAkB,UAATJ,EAAmBK,EAAeC,IAI7C,OAAOJ,EAAYD,EAA2B,CAC5CM,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,YAAa3B,EAAUG,QAAQyB,WAIrCC,QAAS,CACPhB,eAAgB,CACdC,KAAM,CACJgB,WAAY,OACZC,YAAa,MACbC,aAAc,SAIpBC,kBAAmB,CACjBpB,eAAgB,CACdC,KAAM,CACJ,UAAW,CACToB,gBAAiBlC,EAAUG,QAAQgC,SAASC,KAAK,sBAEnD,qBAAsB,CACpBC,aAAc,aAAarC,EAAUG,QAAQgC,SAASG,OAAO,qBAKrEC,YAAa,CACX1B,eAAgB,CACdC,KAAM,CACJ,4BAA6B,CAC3BoB,gBAAiBlC,EAAUG,QAAQgC,SAASC,KAAK,kBACjDI,OAAQ,gBAMlB,EAGSC,EAAa3C,EAA2B,SACxC4C,EAAY5C,EAA2B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "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.9",
-    "@mui/material": "6.4.9",
+    "@mui/icons-material": "6.4.10",
+    "@mui/material": "6.4.10",
     "@mui/x-date-pickers": "^7.23.3",
     "@tanstack/react-query": "^5.62.0",
     "formik": "^2.4.6",