@useloops/design-system 1.4.681 → 1.4.683

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

@@ -4,7 +4,7 @@ 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";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/dist/theme/theme.js

@@ -1 +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://static-pingu-production.useloops.com/fonts/",l=(t,e)=>Object.fromEntries(Object.entries(t).map(([t,a])=>[t,a*e+"px"]));exports.customTheme=(p,d,m)=>t.createTheme({direction:m,p:l(n.padding,n.base),m:l(n.margin,n.base),r:l(n.radius,n.base),custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[p],neutralAlpha:"light"===p?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[p],red:e.redRamp[p],peach:e.peachRamp[p],yellow:e.yellowRamp[p],blue:e.blueRamp[p],green:e.greenRamp[p],icon:o.semantic[p].icon,interaction:o.semantic[p].interaction,stroke:o.semantic[p].stroke,surface:o.semantic[p].surface,text:o.semantic[p].text,input:o.semantic[p].input,skeleton:o.semantic[p].skeleton,data:o.semantic[p].data,body:o.semantic[p].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[d]},palette:{mode:p,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(d),styleOverrides:{root:{color:o.semantic[p].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*n.base+"px",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"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});
+"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=require("../utils/cdn.js").cdnAsset("fonts/"),l=(t,e)=>Object.fromEntries(Object.entries(t).map(([t,a])=>[t,a*e+"px"]));exports.customTheme=(d,p,m)=>t.createTheme({direction:m,p:l(n.padding,n.base),m:l(n.margin,n.base),r:l(n.radius,n.base),custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[d],neutralAlpha:"light"===d?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[d],red:e.redRamp[d],peach:e.peachRamp[d],yellow:e.yellowRamp[d],blue:e.blueRamp[d],green:e.greenRamp[d],icon:o.semantic[d].icon,interaction:o.semantic[d].interaction,stroke:o.semantic[d].stroke,surface:o.semantic[d].surface,text:o.semantic[d].text,input:o.semantic[d].input,skeleton:o.semantic[d].skeleton,data:o.semantic[d].data,body:o.semantic[d].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:d,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[d].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*n.base+"px",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"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});

package/dist/utils/cdn.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Public asset CDN base. Assets live in the `useloops-public` GCS bucket,
+ * served via Cloud CDN. Objects are stored WITHOUT a `public/` prefix.
+ */
+declare const CDN_BASE = "https://static.cdn.useloops.com";
+/** Build a public CDN asset URL from a bucket key (leading slash optional). */
+declare const cdnAsset: (key: string) => string;
+
+export { CDN_BASE, cdnAsset };

package/dist/utils/cdn.js

@@ -0,0 +1 @@
+"use strict";const s="https://static.cdn.useloops.com";exports.CDN_BASE=s,exports.cdnAsset=t=>`${s}/${t.replace(/^\//,"")}`;

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 export { BreakpointOrNull, useBreakpoint } from './utils/breakpoint.hook.js';
+export { CDN_BASE, cdnAsset } from './utils/cdn.js';
 export { compareArrayMembers } from './utils/compareArrayMembers.js';
 export { isButton } from './utils/isButton.js';
 export { pluralise } from './utils/pluralise.js';

package/dist/utils.js

@@ -1 +1 @@
-"use strict";var e=require("./utils/breakpoint.hook.js"),r=require("./utils/compareArrayMembers.js"),s=require("./utils/isButton.js"),o=require("./utils/pluralise.js"),u=require("./utils/screen.hook.js"),i=require("./utils/useKeyCombo.js"),t=require("./utils/usePrevious.js"),p=require("./utils/shouldForwardProp.js");exports.useBreakpoint=e.useBreakpoint,exports.compareArrayMembers=r.compareArrayMembers,exports.isButton=s.isButton,exports.pluralise=o.pluralise,exports.useScreenSize=u.useScreenSize,exports.useKeyCombo=i.useKeyCombo,exports.usePrevious=t.usePrevious,exports.omitProps=p.omitProps;
+"use strict";var e=require("./utils/breakpoint.hook.js"),s=require("./utils/cdn.js"),r=require("./utils/compareArrayMembers.js"),o=require("./utils/isButton.js"),u=require("./utils/pluralise.js"),i=require("./utils/screen.hook.js"),t=require("./utils/useKeyCombo.js"),p=require("./utils/usePrevious.js"),l=require("./utils/shouldForwardProp.js");exports.useBreakpoint=e.useBreakpoint,exports.CDN_BASE=s.CDN_BASE,exports.cdnAsset=s.cdnAsset,exports.compareArrayMembers=r.compareArrayMembers,exports.isButton=o.isButton,exports.pluralise=u.pluralise,exports.useScreenSize=i.useScreenSize,exports.useKeyCombo=t.useKeyCombo,exports.usePrevious=p.usePrevious,exports.omitProps=l.omitProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.681",
+    "version": "1.4.683",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",