@useloops/design-system 1.4.547 → 1.4.548

package/dist/systems/WebCore/VideoModal/VideoModal.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+
+interface VideoModalProps {
+    modalVisible: boolean;
+    showModal: (visible: boolean) => void;
+    video: string;
+}
+declare const VideoModal: FunctionComponent<VideoModalProps>;
+
+export { VideoModal as default };
+export type { VideoModalProps };

package/dist/systems/WebCore/VideoModal/VideoModal.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),o=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var r=require("../../BrandCore/Icon/Icon.js"),i=require("../IconButton/IconButton.js");const t=o.styled(o.Box)(({theme:e})=>({paddingTop:e.spacing(2),position:"fixed",right:0,top:80})),n=o.styled(o.Box)({alignItems:"center",display:"flex",height:"100%",justifyContent:"center",left:0,position:"fixed",top:0,width:"100%"}),s=o.styled(o.Container)({alignItems:"center",display:"flex",justifyContent:"center",position:"relative",zIndex:999}),a=o.styled(o.Box)({aspectRatio:"16/9",maxHeight:"70vh"}),d=o.styled("video")({height:"100%",width:"100%"});module.exports=({modalVisible:l=!1,showModal:c,video:p})=>e.jsx(o.Modal,{closeAfterTransition:!0,onClose:()=>c(!1),open:l,hideBackdrop:!0,children:e.jsx(o.Fade,{in:l,children:e.jsxs(n,{children:[e.jsx(o.Backdrop,{open:l,onClick:()=>c(!1)}),e.jsx(s,{children:e.jsx(a,{children:e.jsx(d,{autoPlay:!0,controls:!0,controlsList:"nodownload noremoteplayback noplaybackrate",disablePictureInPicture:!0,muted:!0,preload:"auto",src:p,tabIndex:-1})})}),e.jsx(t,{children:e.jsx(o.Container,{children:e.jsx(i,{icon:e.jsx(r.default,{name:"close",size:24}),variation:"outlined",shape:"round",onClick:()=>c(!1)})})})]})})});

package/dist/systems/WebCore/utils/autocomplete.styles.js

@@ -0,0 +1 @@
+"use strict";var e=require("@mui/material");require("../../BrandCore/colorRamps.js");var t=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("react/jsx-runtime");var o=require("../../BrandCore/Icon/Icon.js"),i=require("../Select/StyledSelect.variant-helpers.js"),a=require("./typography.util.js");const s=e.styled(e.TextField)(({theme:e,sizing:t})=>({"& .MuiOutlinedInput-root":{padding:0,...t&&{margin:"lg"===t?e.spacing(e.custom.padding.sm):e.spacing(e.custom.padding.xs)}},"& .MuiInputBase-input":{padding:"0 14px"},"& .MuiOutlinedInput-notchedOutline":{border:"none"}}));exports.StyledTextField=s,exports.autocompleteStyles=(e,i)=>({maxWidth:"100%",backgroundColor:e.custom.palette.surface.raised,borderRadius:e.spacing(e.custom.radius.md),border:`1px solid ${e.custom.palette.stroke.default}`,transition:e.custom.easing.input,"& .MuiSvgIcon-root":{...i&&{width:o.iconSizeMap[i],height:o.iconSizeMap[i]}},"& .MuiAutocomplete-inputRoot":{...i&&{fontSize:a.fontSizemap[i],gap:"lg"===i?e.spacing(e.custom.padding.sm):e.spacing(e.custom.padding.xs)},display:"flex",alignItems:"flex-start",paddingRight:3*t.base+"px",flexWrap:"wrap",height:"auto"},"& .MuiOutlinedInput-root":{display:"flex",alignItems:"center",padding:0},"& .MuiAutocomplete-endAdornment":{marginRight:e.spacing(e.custom.margin.sm)},"&.Mui-disabled":{backgroundColor:`${e.custom.palette.input.disabled}`,borderColor:`${e.custom.palette.stroke.disabled}`},"&.Mui-focused":{backgroundColor:e.custom.palette.input.default,borderColor:e.custom.palette.stroke.focus,boxShadow:e.custom.boxShadow.input.focus},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...i&&{padding:`0 ${e.spacing(e.custom.padding.xs)}`}}}),exports.popperStyles=(o,s)=>({"& .MuiPaper-root":{...s&&{margin:"lg"===s?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs),marginLeft:"lg"===s?`-${o.spacing(o.custom.padding.sm)}`:`-${o.spacing(o.custom.padding.xs)}`,marginTop:`calc(${"lg"===s?o.spacing(o.custom.margin.sm):o.spacing(o.custom.margin.xs)} + ${o.spacing(o.custom.margin.xs)})`},border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:i.popperBoxShadow,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${e.autocompleteClasses.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${e.autocompleteClasses.option}`]:{fontSize:a.fontSizemap[s],...s&&{minHeight:"lg"===s?5*t.base+"px":4*t.base+"px"},paddingLeft:o.spacing("xs"===s?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{background:"inherit"},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}});

package/dist/systems/WebCore/utils/backgroundCreator.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@mui/material';
+
+interface BackgroundOptions {
+    texture?: 'none' | 'noise1';
+    gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone3_lowOpacity' | 'tone4';
+}
+declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;
+
+export { backgroundCreator };
+export type { BackgroundOptions };

package/dist/systems/WebCore/utils/backgroundCreator.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../BrandCore/gradients.js"),t=require("../../BrandCore/textures.js");const r=(t,r)=>{switch(r){case"tone1":default:return e.tone1(t);case"tone2":return e.tone2(t);case"tone3":return e.tone3(t);case"tone3_lowOpacity":return e.tone3_lowOpacity(t);case"tone4":return e.tone4(t)}},n=e=>"noise1"===e?`url(${t.noise1})`:null;exports.backgroundCreator=(e,t)=>{const o=r(e,t.gradient),s=n(t.texture);return s?[s,o].join(","):[o].join(",")},exports.getGradient=r,exports.getTexture=n;

package/dist/systems/WebCore/utils/typography.util.js

@@ -0,0 +1 @@
+"use strict";var t=require("../../BrandCore/typography.js");const o=["xxs","xs","sm","md","lg","xl","xxl","xxxl"],n=(t,o=16)=>{const n=1/o*t;return Math.round(1e3*n)/1e3},e=(t,e="xs")=>{const s=o.reduce((n,s,r)=>{const a=o.indexOf(e)||0,p=Number((16*Math.pow(t,r-a)).toFixed(2));return n[s]=p,n},{}),r={};for(const[t,o]of Object.entries(s))r[t]=n(o)+"rem";return r},s={lg:{headline:e(1.309,"xs"),body:e(1.125,"md")},sm:{headline:e(1.125,"xs"),body:e(1.1,"md")},button:e(1.125,"md")},r={xxs:s.button.xxs,xs:s.button.xs,sm:s.button.sm,md:s.button.sm,lg:s.button.md,xl:s.button.lg,xxl:s.button.xl,xxxl:s.button.xxl};exports.fontSizemap=r,exports.pxToRem=n,exports.typographicScale=e,exports.typographicSizes=o,exports.typographyVariantMap=s,exports.typographyVariants=n=>{const e=o.map(o=>({props:{variant:o},style:{fontFamily:`${t.fonts.FontStack.Serif}`,fontSize:s[n].headline[o]}})),r=o.map(o=>({props:{variant:o,component:"h5"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),a=o.map(o=>({props:{variant:o,component:"h6"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}}));return[...e,...o.map(o=>({props:{variant:o,component:"p"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),...r,...a]};

package/dist/theme/GlobalStyleReset.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");module.exports=()=>e.jsx(r.GlobalStyles,{styles:{"strong, b":{fontWeight:500}}});

package/dist/theme/theme.context.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { PaletteMode, Theme } from '@mui/material';
+import { CustomTheme } from './types.js';
+
+interface ThemeCtx {
+    breakpoint: string;
+    custom: CustomTheme;
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+}
+declare const ThemeContext: react.Context<Nullable<ThemeCtx>>;
+
+export { ThemeContext };
+export type { ThemeCtx };

package/dist/theme/theme.context.js

@@ -0,0 +1 @@
+"use strict";const e=require("react").createContext(null);exports.ThemeContext=e;

package/dist/theme/theme.d.ts

@@ -0,0 +1,6 @@
+import { PaletteMode, Direction, Theme } from '@mui/material';
+import { ScreenSize } from './types.js';
+
+declare const customTheme: (mode: PaletteMode, size: ScreenSize, direction?: Direction) => Theme;
+
+export { customTheme };

package/dist/theme/theme.hooks.d.ts

@@ -0,0 +1,17 @@
+import { ThemeCtx } from './theme.context.js';
+import * as _mui_material from '@mui/material';
+import { PaletteMode, Direction } from '@mui/material';
+import { ScreenSize, CustomTheme } from './types.js';
+
+declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
+    breakpoint: "" | "sm" | "lg" | "md" | "xl";
+    custom: CustomTheme;
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: _mui_material.Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+};
+declare const useTheme: () => ThemeCtx;
+
+export { useTheme, useThemeBuilder };

package/dist/theme/theme.hooks.js

@@ -0,0 +1 @@
+"use strict";var e=require("@mui/material"),t=require("react"),s=require("../node_modules/tiny-invariant/dist/esm/tiny-invariant.js"),r=require("../systems/BrandCore/primitiveVariables.js"),i=require("../utils/screen.hook.js"),n=require("./theme.js"),u=require("./theme.context.js");exports.useTheme=()=>{const e=t.useContext(u.ThemeContext);return s(e,"useTheme must be used within a ThemeProvider"),e},exports.useThemeBuilder=(s="light",u="lg",a="ltr")=>{const{width:o}=i.useScreenSize(),[m,l]=t.useState(s),[d,c]=t.useState(u),[h,g]=t.useState(a),[T,b]=t.useState(!1),[f,y]=t.useState("");t.useEffect(()=>{h&&document.documentElement.setAttribute("dir",h)},[h]);t.useEffect(()=>{t.startTransition(()=>{c(o&&o<r.breakpoints.lg?"sm":"lg")})},[o]),t.useEffect(()=>{t.startTransition(()=>{g(a)})},[a]),t.useEffect(()=>{t.startTransition(()=>{l(s)})},[s]);const S=t.useMemo(()=>n.customTheme(m,d,h),[m,h,d]),p=e.useMediaQuery(S.breakpoints.only("sm"),{noSsr:!0}),k=e.useMediaQuery(S.breakpoints.only("md"),{noSsr:!0}),x=e.useMediaQuery(S.breakpoints.between("lg","xl"),{noSsr:!0}),q=e.useMediaQuery(S.breakpoints.up("xl"),{noSsr:!0});return t.useEffect(()=>{t.startTransition(()=>{p&&y("sm"),k&&y("md"),x&&y("lg"),q&&y("xl")})},[p,k,x,q]),{breakpoint:f,custom:S.custom,gridOverlayVisible:T,mode:m,theme:S,toggleGridOverlay:()=>{t.startTransition(()=>{b(e=>!e)})},toggleMode:e=>{t.startTransition(()=>{if(e)return l(e);l(e=>"light"===e?"dark":"light")})}}};

package/dist/theme/theme.js

@@ -0,0 +1 @@
+"use strict";var t=require("@mui/material"),e=require("../systems/BrandCore/colorRamps.js"),a=require("../systems/BrandCore/primitiveColor.js"),n=require("../systems/BrandCore/primitiveVariables.js"),o=require("../systems/BrandCore/semanticColor.js"),r=require("../systems/BrandCore/typography.js"),i=require("../systems/WebCore/utils/typography.util.js");const s="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/";exports.customTheme=(l,p,d)=>t.createTheme({direction:d,custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[l],neutralAlpha:"light"===l?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[l],red:e.redRamp[l],peach:e.peachRamp[l],yellow:e.yellowRamp[l],blue:e.blueRamp[l],green:e.greenRamp[l],icon:o.semantic[l].icon,interaction:o.semantic[l].interaction,stroke:o.semantic[l].stroke,surface:o.semantic[l].surface,text:o.semantic[l].text,input:o.semantic[l].input,skeleton:o.semantic[l].skeleton,data:o.semantic[l].data,body:o.semantic[l].surface.default},margin:n.margin,padding:n.padding,radius:n.radius,elevation:n.elevation,elevationFilter:n.elevationFilter,boxShadow:n.boxShadow,easing:n.easing,typography:i.typographyVariantMap[p]},palette:{mode:l,primary:{main:a.purple[500]}},spacing:n.base,shape:{borderRadius:n.base,hotspot:{default:12,active:24}},breakpoints:{values:n.breakpoints},typography:{fontFamily:`"${r.fonts.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:i.typographyVariants(p),styleOverrides:{root:{color:o.semantic[l].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n                    @font-face {\n                        font-family: '${r.fonts.Domaine.name}';\n                        font-style: normal;\n                        font-display: swap;\n                        font-weight: ${r.fonts.Domaine.default.weight};\n                        src: url(${s}${r.fonts.Domaine.default.fileName}) format('woff2');\n                    }\n                    @font-face {\n                        font-family: '${r.fonts.Domaine.name}';\n                        font-style: normal;\n                        font-display: swap;\n                        font-weight: ${r.fonts.Domaine.bold.weight};\n                        src: url(${s}${r.fonts.Domaine.bold.fileName}) format('woff2');\n                    }\n                    @font-face {\n                        font-family: '${r.fonts.FoundersGrotesk.name}';\n                        font-style: normal;\n                        font-display: swap;\n                        font-weight: ${r.fonts.FoundersGrotesk.default.weight};\n                        src: url(${s}${r.fonts.FoundersGrotesk.default.fileName}) format('woff2');\n                    }\n                    @font-face {\n                        font-family: '${r.fonts.FoundersGrotesk.name}';\n                        font-style: normal;\n                        font-display: swap;\n                        font-weight: ${r.fonts.FoundersGrotesk.bold.weight};\n                        src: url(${s}${r.fonts.FoundersGrotesk.bold.fileName}) format('woff2');\n                    }\n                `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${n.breakpoints.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${n.breakpoints.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:r.fonts.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*n.base}px ${t.padding.md*n.base}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}}}});

package/dist/theme/theme.provider.d.ts

@@ -0,0 +1,13 @@
+import { PaletteMode, Direction } from '@mui/material';
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { ScreenSize } from './types.js';
+
+interface Props extends PropsWithChildren {
+    mode?: PaletteMode;
+    screenSize?: ScreenSize;
+    direction?: Direction;
+    ignoreCacheProvider?: boolean;
+}
+declare const ThemeProvider: FunctionComponent<Props>;
+
+export { ThemeProvider };

package/dist/theme/theme.provider.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("../node_modules/@emotion/cache/dist/emotion-cache.esm.js"),i=require("@emotion/react"),t=require("@mui/material"),s=require("@mui/material/styles"),l=require("stylis"),u=require("stylis-plugin-rtl"),o=require("./GlobalStyleReset.js"),n=require("./theme.context.js"),m=require("./theme.hooks.js");function c(e){return e&&e.__esModule?e:{default:e}}var a=c(u);const d=r({key:"muirtl",stylisPlugins:[l.prefixer,a.default]}),h=r({key:"mui"});exports.ThemeProvider=({mode:r="light",screenSize:l="lg",direction:u="ltr",ignoreCacheProvider:c,children:a})=>{const j=m.useThemeBuilder(r,l,u),q=()=>e.jsxs(s.ThemeProvider,{theme:j.theme,children:[e.jsx(t.CssBaseline,{}),e.jsx(o,{}),a]});return e.jsx(n.ThemeContext.Provider,{value:j,children:c?q():e.jsx(i.CacheProvider,{value:"rtl"===u?d:h,children:q()})})};

package/dist/theme/types.d.ts

@@ -0,0 +1,161 @@
+import { ColorRange, ColorRangeAlpha } from '../systems/BrandCore/types.js';
+
+type ScreenSize = 'sm' | 'lg';
+interface CustomTheme {
+    palette: {
+        black: string;
+        white: string;
+        neutral: ColorRange;
+        neutralAlpha: ColorRangeAlpha;
+        purple: ColorRange;
+        red: ColorRange;
+        peach: ColorRange;
+        yellow: ColorRange;
+        blue: ColorRange;
+        green: ColorRange;
+        icon: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+            primaryInverted: string;
+            secondaryInverted: string;
+            disabledInverted: string;
+            lockedWhite: string;
+            link: string;
+            linkHover: string;
+        };
+        interaction: {
+            none: string;
+            hover: string;
+            press: string;
+            hoverOnDark: string;
+            pressOnDark: string;
+            disabled: string;
+            disabledMuted: string;
+        };
+        stroke: {
+            default: string;
+            light: string;
+            focus: string;
+            disabled: string;
+        };
+        surface: {
+            default: string;
+            sunken: string;
+            raised: string;
+            float: string;
+            overlay: string;
+            scrim: string;
+            transparent: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            placeholder: string;
+            disabled: string;
+            link: string;
+            linkHover: string;
+            primaryInverted: string;
+            secondaryInverted: string;
+            placeholderInverted: string;
+            disabledInverted: string;
+            positive: string;
+            negative: string;
+            lockedWhite: string;
+        };
+        input: {
+            default: string;
+            disabled: string;
+        };
+        skeleton: {
+            default: string;
+        };
+        data: {
+            sentimentVeryPositive: string;
+            sentimentPositive: string;
+            sentimentNeutral: string;
+            sentimentNegative: string;
+            sentimentVeryNegative: string;
+        };
+        body: string;
+    };
+    margin: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        xxxl: number;
+    };
+    padding: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    radius: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        round: number;
+    };
+    elevation: {
+        raised: string;
+        float: string;
+        overlay: string;
+        aiSummary: string;
+    };
+    elevationFilter: {
+        raised: string;
+        float: string;
+        overlay: string;
+    };
+    easing: {
+        default: string;
+        input: string;
+    };
+    boxShadow: {
+        input: {
+            focus: string;
+            handle: string;
+        };
+    };
+    shape: {
+        borderRadius: number;
+        hotspot: {
+            active: number;
+            default: number;
+        };
+    };
+    typography: {
+        headline: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+        body: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+    };
+}
+
+export type { CustomTheme, ScreenSize };

package/dist/theme.d.ts

@@ -1,197 +1,5 @@
-import * as _mui_material from '@mui/material';
-import { PaletteMode, Direction, Theme } from '@mui/material';
-import { C as ColorRange, a as ColorRangeAlpha } from './types-BFOuz_kj.js';
-import * as react from 'react';
-import { FunctionComponent, PropsWithChildren } from 'react';
-
-type ScreenSize = 'sm' | 'lg';
-interface CustomTheme {
-    palette: {
-        black: string;
-        white: string;
-        neutral: ColorRange;
-        neutralAlpha: ColorRangeAlpha;
-        purple: ColorRange;
-        red: ColorRange;
-        peach: ColorRange;
-        yellow: ColorRange;
-        blue: ColorRange;
-        green: ColorRange;
-        icon: {
-            primary: string;
-            secondary: string;
-            disabled: string;
-            primaryInverted: string;
-            secondaryInverted: string;
-            disabledInverted: string;
-            lockedWhite: string;
-            link: string;
-            linkHover: string;
-        };
-        interaction: {
-            none: string;
-            hover: string;
-            press: string;
-            hoverOnDark: string;
-            pressOnDark: string;
-            disabled: string;
-            disabledMuted: string;
-        };
-        stroke: {
-            default: string;
-            light: string;
-            focus: string;
-            disabled: string;
-        };
-        surface: {
-            default: string;
-            sunken: string;
-            raised: string;
-            float: string;
-            overlay: string;
-            scrim: string;
-            transparent: string;
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            placeholder: string;
-            disabled: string;
-            link: string;
-            linkHover: string;
-            primaryInverted: string;
-            secondaryInverted: string;
-            placeholderInverted: string;
-            disabledInverted: string;
-            positive: string;
-            negative: string;
-            lockedWhite: string;
-        };
-        input: {
-            default: string;
-            disabled: string;
-        };
-        skeleton: {
-            default: string;
-        };
-        data: {
-            sentimentVeryPositive: string;
-            sentimentPositive: string;
-            sentimentNeutral: string;
-            sentimentNegative: string;
-            sentimentVeryNegative: string;
-        };
-        body: string;
-    };
-    margin: {
-        none: number;
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        xxl: number;
-        xxxl: number;
-    };
-    padding: {
-        none: number;
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
-    radius: {
-        none: number;
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        round: number;
-    };
-    elevation: {
-        raised: string;
-        float: string;
-        overlay: string;
-        aiSummary: string;
-    };
-    elevationFilter: {
-        raised: string;
-        float: string;
-        overlay: string;
-    };
-    easing: {
-        default: string;
-        input: string;
-    };
-    boxShadow: {
-        input: {
-            focus: string;
-            handle: string;
-        };
-    };
-    shape: {
-        borderRadius: number;
-        hotspot: {
-            active: number;
-            default: number;
-        };
-    };
-    typography: {
-        headline: {
-            xxs: string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            xxl: string;
-            xxxl: string;
-        };
-        body: {
-            xxs: string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            xxl: string;
-            xxxl: string;
-        };
-    };
-}
-
-declare const customTheme: (mode: PaletteMode, size: ScreenSize, direction?: Direction) => Theme;
-
-interface ThemeCtx {
-    breakpoint: string;
-    custom: CustomTheme;
-    gridOverlayVisible: boolean;
-    mode: PaletteMode;
-    theme: Theme;
-    toggleGridOverlay: () => void;
-    toggleMode: (mode?: PaletteMode) => void;
-}
-declare const ThemeContext: react.Context<Nullable<ThemeCtx>>;
-
-declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "md" | "lg" | "xl";
-    custom: CustomTheme;
-    gridOverlayVisible: boolean;
-    mode: PaletteMode;
-    theme: _mui_material.Theme;
-    toggleGridOverlay: () => void;
-    toggleMode: (mode?: PaletteMode) => void;
-};
-declare const useTheme: () => ThemeCtx;
-
-interface Props extends PropsWithChildren {
-    mode?: PaletteMode;
-    screenSize?: ScreenSize;
-    direction?: Direction;
-    ignoreCacheProvider?: boolean;
-}
-declare const ThemeProvider: FunctionComponent<Props>;
-
-export { type CustomTheme, type ScreenSize, ThemeContext, type ThemeCtx, ThemeProvider, customTheme, useTheme, useThemeBuilder };
+export { customTheme } from './theme/theme.js';
+export { useTheme, useThemeBuilder } from './theme/theme.hooks.js';
+export { ThemeProvider } from './theme/theme.provider.js';
+export { ThemeContext, ThemeCtx } from './theme/theme.context.js';
+export { CustomTheme, ScreenSize } from './theme/types.js';

package/dist/theme.js

@@ -1 +1 @@
-"use strict";var e=require("./_chunks/theme.provider-CFQC74O-.js");require("react/jsx-runtime"),require("stylis"),require("@emotion/react"),require("@mui/material"),require("@mui/material/styles"),require("stylis-plugin-rtl"),require("react"),require("./_chunks/primitiveVariables-DOkvMbUd.js"),require("./_chunks/screen.hook-BWo6Lcm1.js"),require("./_chunks/semanticColor-D7luRDLB.js"),require("./_chunks/typography-Cx74j4k8.js"),require("./_chunks/types-BbAsZw_6.js"),require("./_chunks/typography.util-Cfj-ZgvS.js"),exports.ThemeContext=e.ThemeContext,exports.ThemeProvider=e.ThemeProvider,exports.customTheme=e.customTheme,exports.useTheme=e.useTheme,exports.useThemeBuilder=e.useThemeBuilder;
+"use strict";var e=require("./theme/theme.js"),r=require("./theme/theme.hooks.js"),t=require("./theme/theme.provider.js"),m=require("./theme/theme.context.js");exports.customTheme=e.customTheme,exports.useTheme=r.useTheme,exports.useThemeBuilder=r.useThemeBuilder,exports.ThemeProvider=t.ThemeProvider,exports.ThemeContext=m.ThemeContext;

package/dist/utils/breakpoint.hook.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '@mui/material';
+
+type BreakpointOrNull = Breakpoint | null;
+declare const useBreakpoint: () => Breakpoint;
+
+export { useBreakpoint };
+export type { BreakpointOrNull };

package/dist/utils/breakpoint.hook.js

@@ -0,0 +1 @@
+"use strict";var e=require("@mui/material");exports.useBreakpoint=()=>{const r=e.useTheme();return[...r.breakpoints.keys].reduce((s,u)=>e.useMediaQuery(r.breakpoints.up(u))?u:s,null)??"sm"};

package/dist/utils/compareArrayMembers.d.ts

@@ -0,0 +1,3 @@
+declare function compareArrayMembers(arr1: string[], arr2: string[]): boolean;
+
+export { compareArrayMembers };

package/dist/utils/compareArrayMembers.js

@@ -0,0 +1 @@
+"use strict";exports.compareArrayMembers=function(e,r){const t=new Set(e),s=new Set(r);return e.every(e=>s.has(e))&&r.every(e=>t.has(e))};

package/dist/utils/formValidation/email.d.ts

@@ -0,0 +1,8 @@
+declare const emailValidation: {
+    pattern: {
+        value: RegExp;
+        message: string;
+    };
+};
+
+export { emailValidation };

package/dist/utils/formValidation/misc.d.ts

@@ -0,0 +1,11 @@
+declare const chooseArticle: (word: string) => string;
+declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
+    required?: string | undefined;
+    maxLength: {
+        value: number;
+        message: string;
+    };
+};
+declare const DEFAULT_MAX_INPUT_LENGTH: number;
+
+export { DEFAULT_MAX_INPUT_LENGTH, chooseArticle, defaultInputValidation };

package/dist/utils/formValidation/misc.js

@@ -0,0 +1 @@
+"use strict";const e=e=>{const t=e.toLowerCase();return["a","e","i","o","u"].some(e=>t.startsWith(e))?"an":"a"},t=(t,a,s)=>({maxLength:{value:s||255,message:`Maximum character limit of ${s||255}.`},...a&&{required:t?`Please enter ${e(t)} ${t}`:"This field is required"}}),a=t().maxLength.value;exports.DEFAULT_MAX_INPUT_LENGTH=a,exports.chooseArticle=e,exports.defaultInputValidation=t;

package/dist/utils/formValidation/password.d.ts

@@ -0,0 +1,12 @@
+declare const passwordValidation: (min?: number) => {
+    minLength: {
+        value: number;
+        message: string;
+    };
+    equal: {
+        value: string;
+        message: string;
+    };
+};
+
+export { passwordValidation };

package/dist/utils/formatTime.js

@@ -0,0 +1 @@
+"use strict";exports.formatTime=o=>{const t=Math.floor(o/3600),r=Math.floor(o%3600/60),$=Math.floor(o%60),a=$<10?"0"+$:$,e=t>0&&r<10?"0"+r:r;return t>0?`${t}:${e}:${a}`:`${e}:${a}`};

package/dist/utils/isButton.d.ts

@@ -0,0 +1,3 @@
+declare function isButton(element: HTMLElement): boolean;
+
+export { isButton };

package/dist/utils/normaliseFloat.js

@@ -0,0 +1 @@
+"use strict";exports.normaliseFloat=(t,e=1e5)=>Math.round(t*e)/e;

package/dist/utils/pluralise.d.ts

@@ -0,0 +1,3 @@
+declare const pluralise: (word: string, amount: number) => string;
+
+export { pluralise };

package/dist/utils/screen.hook.d.ts

@@ -0,0 +1,6 @@
+declare const useScreenSize: () => {
+    width: number | undefined;
+    height: number | undefined;
+};
+
+export { useScreenSize };

package/dist/utils/screen.hook.js

@@ -0,0 +1 @@
+"use strict";var e=require("react");exports.useScreenSize=()=>{const t="object"==typeof window;function i(){return{width:t?window.innerWidth:void 0,height:t?window.innerHeight:void 0}}const[n,r]=e.useState(i);return e.useEffect(()=>{if(t)return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n);function n(){e.startTransition(()=>{r(i())})}},[]),n};

package/dist/utils/useKeyCombo.d.ts

@@ -0,0 +1,12 @@
+type ComboString = string;
+type ComboObject = {
+    key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+};
+type ComboDefinition = ComboString | ComboObject;
+declare const useKeyCombo: (combo: ComboDefinition | ComboDefinition[], callback: (event: KeyboardEvent) => void, node?: HTMLElement | Document | null) => void;
+
+export { useKeyCombo };

package/dist/utils/useKeyCombo.js

@@ -0,0 +1 @@
+"use strict";var e=require("react");exports.useKeyCombo=(t,r,s=null)=>{const n=e.useRef(r);e.useEffect(()=>{n.current=r},[r]);const o=e=>{if("string"!=typeof e)return e;const t=e.toLowerCase().split("+");return{key:t[t.length-1],altKey:t.includes("alt"),ctrlKey:t.includes("ctrl")||t.includes("control"),metaKey:t.includes("meta")||t.includes("cmd")||t.includes("command"),shiftKey:t.includes("shift")}},c=Array.isArray(t)?t.map(o):[o(t)],i=e.useCallback(e=>{for(const t of c)if("string"==typeof t){if(e.key.toLowerCase()===t.toLowerCase())return void n.current(e)}else{const r="*"===t.key||e.key.toLowerCase()===t.key.toLowerCase(),s=e.altKey===!!t.altKey&&e.ctrlKey===!!t.ctrlKey&&e.metaKey===!!t.metaKey&&e.shiftKey===!!t.shiftKey;if(r&&s)return void n.current(e)}},[c]);e.useEffect(()=>{const e=s??document,t=i;return e?.addEventListener("keydown",t),()=>e?.removeEventListener("keydown",t)},[i,s])};

package/dist/utils/usePrevious.d.ts

@@ -0,0 +1,3 @@
+declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;
+
+export { usePrevious };

package/dist/utils/usePrevious.js

@@ -0,0 +1 @@
+"use strict";var e=require("react");exports.usePrevious=r=>{const t=e.useRef(void 0);return e.useEffect(()=>{t.current=r},[r]),t.current};

package/dist/utils/useSentimentDiscriptor.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@mui/material");exports.SenitmentKeyEnums=void 0,(e=exports.SenitmentKeyEnums||(exports.SenitmentKeyEnums={})).veryPositive="veryPositive",e.positive="positive",e.neutral="neutral",e.negative="negative",e.veryNegative="veryNegative";exports.default=()=>{const e=t.useTheme(),n=[{value:1,name:"Very positive",key:exports.SenitmentKeyEnums.veryPositive,min:.6,max:1,color:e.custom.palette.data.sentimentVeryPositive},{value:.5,name:"Positive",key:exports.SenitmentKeyEnums.positive,min:.2,max:.6,color:e.custom.palette.data.sentimentPositive},{value:0,name:"Neutral",key:exports.SenitmentKeyEnums.neutral,min:-.19999,max:.2,color:e.custom.palette.data.sentimentNeutral},{value:-.5,name:"Negative",key:exports.SenitmentKeyEnums.negative,min:-.59999,max:-.19999,color:e.custom.palette.data.sentimentNegative},{value:-1,name:"Very negative",key:exports.SenitmentKeyEnums.veryNegative,min:-1,max:-.59999,color:e.custom.palette.data.sentimentVeryNegative}];return{sentimentCategories:n,getSentimentByScore:function(e){return n.find(t=>e>=t.min&&e<=t.max)||{name:"Unknown",color:"transparent",key:exports.SenitmentKeyEnums.neutral,value:0,min:-1,max:1}}}};

package/dist/utils/valueToPercentage.js

@@ -0,0 +1 @@
+"use strict";exports.valueToPercentage=(e,t)=>t/e*100;