@datawheel/bespoke 1.0.0-rc.2 → 1.0.0-rc.20

package/README.md

@@ -1,5 +1,11 @@
 # Reports
 
+## Documentation
+
+- **[Customization Guide](./docs/customization.md)** - Overview of styling and component customization options
+- **[Styling Guide](./docs/customization/styles.md)** - Detailed CSS/SCSS customization reference
+- **[Custom Components Guide](./docs/customization/components.md)** - How to override default components
+
 ## EnvVars
 
 ```
@@ -16,9 +22,10 @@ NEXT_PUBLIC_IMAGE_SPLASH_WIDTH=1400
 NEXT_PUBLIC_IMAGE_THUMB_WIDTH=400
 
 # Providers
-NEXT_PUBLIC_IMAGE_PROVIDERS="upload,local,flickr,unsplash,adobe"
+NEXT_PUBLIC_IMAGE_PROVIDERS="upload,local,flickr,unsplash,adobe,pixabay"
 FLICKR_API_KEY="xxxx"
 UNSPLASH_API_KEY="xxxx"
+PIXABAY_API_KEY="xxxx"
 # unused ADOBE_STOCK_API_KEY="xxxx"
 # unused ADOBE_STOCK_API_SECRET="xxxx"
 # unused ADOBE_MANAGEMENT_API_KEY="xxxx"
@@ -56,3 +63,5 @@ publicRuntimeConfig: {
 ```
 
 And is gonna be offered as ENV_API and ENV_WHATEVER in the list of variables in the profile.
+
+## SCSS Mixins

package/css/mixins.scss

@@ -0,0 +1,178 @@
+@use "sass:string";
+@use "sass:math";
+
+/* -----------------------------------
+Bespoke Component Mixins
+----------------------------------- */
+
+/// @mixin bespoke($component, $element)
+/// Converts @bespoke(Component, element) into :global(.bespoke-Component-element)
+@mixin bespoke($component, $element: "root") {
+    // 1. Construct the class name: .bespoke-Component-element
+    $class-name: ".bespoke-" + $component + "-" + $element;
+
+    // 2. Construct the full selector: :global(.bespoke-Component-element)
+    $selector: ":global(" + $class-name + ")";
+
+    // 3. Output the selector and its content placeholder
+    // The @content directive allows you to pass CSS rules to the mixin call
+
+    #{$selector} {
+        @content;
+    }
+}
+
+
+/* -----------------------------------
+Mantine Mixins
+----------------------------------- */
+
+// Define variables for your breakpoints,
+// values must be the same as in your theme
+$mantine-breakpoint-xs: '36em';
+$mantine-breakpoint-sm: '48em';
+$mantine-breakpoint-md: '62em';
+$mantine-breakpoint-lg: '75em';
+$mantine-breakpoint-xl: '94em';
+
+@function rem($value) {
+    @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
+}
+
+@mixin light {
+    [data-mantine-color-scheme='light'] & {
+        @content;
+    }
+}
+
+@mixin dark {
+    [data-mantine-color-scheme='dark'] & {
+        @content;
+    }
+}
+
+@mixin hover {
+    @media (hover: hover) {
+        &:hover {
+            @content;
+        }
+    }
+
+    @media (hover: none) {
+        &:active {
+            @content;
+        }
+    }
+}
+
+@mixin smaller-than($breakpoint) {
+    @media (max-width: $breakpoint) {
+        @content;
+    }
+}
+
+@mixin larger-than($breakpoint) {
+    @media (min-width: $breakpoint) {
+        @content;
+    }
+}
+
+// Add direction mixins if you need rtl support
+@mixin rtl {
+    [dir='rtl'] & {
+        @content;
+    }
+}
+
+@mixin ltr {
+    [dir='ltr'] & {
+        @content;
+    }
+}
+
+
+/* -----------------------------------
+Accessibility
+----------------------------------- */
+
+/* accessibly hidden text and elements */
+@mixin visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+/* reset visually-hidden properties */
+@mixin reset-visually-hidden {
+  clip: auto;
+  position: relative !important;
+  height: auto;
+  width: 100%;
+  overflow: auto;
+}
+
+
+/* -----------------------------------
+Layout
+----------------------------------- */
+
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+/* fill up all the space — make sure the parent has pos:rel */
+@mixin absolute-expand {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* center elements the dumb but sometimes useful way */
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@mixin absolute-vertical-center {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+@mixin absolute-horizontal-center {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+@mixin hide-scrollbars {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* overflow with inertia scrolling */
+@mixin overflow-container {
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+@mixin vertical-overflow-container {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+}
+@mixin horizontal-overflow-container {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+

package/dist/Search-C-9ALKJo.d.mts

@@ -0,0 +1,129 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { u as SearchReportItem, i as SearchReportParams } from './types-WI9fSG9b.mjs';
+import { AutocompleteProps, TooltipProps } from '@mantine/core';
+
+interface ReportTileProps {
+    reportId: string;
+    reportName: string;
+    members: Array<{
+        original_id: string;
+        name: string;
+        id: number;
+        variant: string;
+        variant_id: number;
+        dimension: string;
+        dimension_id: number;
+        image: {
+            src: string;
+            alt: string;
+        };
+    }>;
+    href: string;
+    onClick: (e: React.MouseEvent) => void;
+}
+
+type TranslationKeys = "try_another" | "search" | "filters_all" | "no_results" | "load_more" | "select_report" | "select_variant" | "count_format";
+type MetaTranslations = {
+    dimension?: Record<string, string>;
+    dimensionIcon?: Record<string, string>;
+    report?: Record<string, string>;
+    variant?: Record<string, string>;
+    variantIcon?: Record<string, string>;
+    tooltip?: string;
+};
+type ExploreTranslations = Partial<Record<TranslationKeys, string> & MetaTranslations>;
+type FiltersType = {
+    profile?: number | undefined;
+    variant?: number | string | undefined;
+};
+interface Selector {
+    id?: number;
+    name: string;
+    members_count?: number;
+    variants?: {
+        id?: number;
+        name: string;
+        members_count?: number;
+    }[];
+}
+interface ExploreContextType {
+    metadata: any[];
+    loadingItems: boolean;
+    setLoadingItems: (q: boolean) => void;
+    loadingMetadata: boolean;
+    setLoadingMetadata: (q: boolean) => void;
+    resultCount: {
+        [key: number]: number;
+    };
+    totalCount: {
+        [key: number]: number;
+    };
+    setResultCount: (params: {
+        [key: number]: number;
+    } | false) => void;
+    activePage: number;
+    setActivePage: (page: number) => void;
+    pageSize: number;
+    results: SearchReportItem[];
+    filters: FiltersType;
+    doQuery: (cancelled: any, newOffset: any) => void;
+    setFilters: (filter: FiltersType) => void;
+    query: string;
+    setQuery: (q: string) => void;
+    debouncedQuery: string;
+    currentPageTotal: number;
+    selectorStructure: Selector[];
+    translations: ExploreTranslations;
+    setTranslations: (t: ExploreTranslations) => void;
+    showSelectors: boolean;
+    initExplore?: (p: number | undefined, v: number | undefined, q: string | undefined) => void;
+}
+declare const useExplore: () => ExploreContextType;
+interface ExploreProviderProps {
+    children: ReactNode;
+    pageSize?: number;
+    sort?: string;
+}
+declare function ExploreProvider({ children, pageSize, sort }: ExploreProviderProps): react_jsx_runtime.JSX.Element;
+
+type BespokeSearchProps = {
+    locale: string;
+    profilePrefix: string;
+    autocompleteProps?: Partial<AutocompleteProps & {
+        searchConfig: {
+            searchLimit?: number;
+            queryThreshold?: number;
+        };
+    }> | Record<string, never>;
+    tooltipProps?: Partial<TooltipProps>;
+    tooltipText?: string;
+    searchReportParams?: Partial<SearchReportParams>;
+    callback?: (item: ReportItemProps) => void;
+    children?: ReactNode;
+};
+interface ReportItemPropsInner {
+    id: string;
+    reportName: string;
+    reportPath: string;
+    profilePrefix: string;
+    members: Array<{
+        original_id: string;
+        name: string;
+        id: number;
+        variant: string;
+        image: {
+            src: string;
+            alt: string;
+        };
+    }>;
+    href: string;
+    value: string;
+}
+type ReportItemProps = ReportItemPropsInner;
+/**
+ * React component for rendering an inline search autocomplete
+ */
+declare function BespokeSearch({ locale, profilePrefix, autocompleteProps, tooltipProps, tooltipText, searchReportParams, callback, children }: BespokeSearchProps): react_jsx_runtime.JSX.Element;
+
+export { BespokeSearch as B, type ExploreTranslations as E, type ReportTileProps as R, type ReportItemProps as a, ExploreProvider as b, useExplore as u };

package/dist/auth-D3PWImeZ.d.mts

@@ -0,0 +1,139 @@
+import { S as SearchUsersParams, U as UpdateUserParams } from './types-WI9fSG9b.mjs';
+import { User, DefaultSession, NextAuthOptions } from 'next-auth';
+import { SessionContextValue } from 'next-auth/react';
+
+interface BespokeUserInfo {
+    id?: string | null;
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+    bespoke_app_metadata: {
+        reports?: {
+            reportId: number;
+            favorites: {
+                variantId: number;
+                contentId: number;
+            }[];
+            [key: string]: any;
+        }[];
+        [key: string]: any;
+    };
+    bespoke_user_metadata: {
+        preferredLocale?: string;
+        [key: string]: any;
+    };
+    bespoke_roles: string[];
+    [key: string]: any;
+}
+declare module "next-auth" {
+    interface User extends User, BespokeUserInfo {
+    }
+    interface Session extends DefaultSession {
+        user: BespokeUserInfo;
+    }
+    interface Profile {
+        bespoke_app_metadata?: {
+            reports?: {
+                reportId: number;
+                favorites: {
+                    variantId: number;
+                    contentId: number;
+                }[];
+                [key: string]: any;
+            }[];
+            preferredLocale?: string;
+            [key: string]: any;
+        };
+        bespoke_user_metadata?: {
+            preferredLocale?: string;
+            [key: string]: any;
+        };
+        bespoke_roles?: string[];
+        name?: string;
+    }
+}
+declare module "next-auth/jwt" {
+    interface JWT {
+        bespoke_app_metadata: {
+            reports?: {
+                reportId: number;
+                favorites: {
+                    variantId: number;
+                    contentId: number;
+                }[];
+                [key: string]: any;
+            }[];
+            [key: string]: any;
+        };
+        bespoke_user_metadata: {
+            preferredLocale?: string;
+            [key: string]: any;
+        };
+        bespoke_roles: string[];
+    }
+}
+/**
+ * Auth and roles
+ * There is a convention for roles names (no diference with IDs);
+ * "Admin" : Manage users and roles
+ * "Editor": Manage reports
+ * "Writer": Manage posts
+ */
+declare const CMS_ROLES: {
+    ADMIN: string;
+    EDITOR: string;
+    WRITER: string;
+};
+/**
+ * Roles could be SYSTEM: Defined by the app and needed to work; or USER: Defined by the user
+ * */
+declare const addRoleTypes: (roles: BespokeRole[]) => BespokeRole[];
+type BespokeRole = {
+    id: string;
+    name: string;
+    description: string;
+    type?: string;
+};
+interface BespokeUserProfile {
+    app_metadata: {
+        reports?: {
+            reportId: number;
+            favorites: {
+                variantId: number;
+                contentId: number;
+            }[];
+            [key: string]: any;
+        }[];
+    };
+    user_metadata: {
+        preferredLocale?: string;
+    };
+    roles: BespokeRole[];
+    [key: string]: any;
+}
+type BespokeUserData = {
+    isLoading: boolean;
+    update: SessionContextValue["update"];
+    user?: BespokeUserInfo;
+    status: SessionContextValue["status"];
+};
+interface SearchUserResult {
+    users: BespokeUserProfile[];
+    start: number;
+    limit: number;
+    length: number;
+    total: number;
+}
+interface BespokeAuthOptions extends NextAuthOptions {
+    actions?: {
+        searchRole: () => () => Promise<{
+            roles: BespokeRole[];
+        }>;
+        searchUser: () => (filters: SearchUsersParams) => Promise<SearchUserResult>;
+        readUser: () => (userId: string) => Promise<BespokeUserProfile>;
+        updateUser: () => (user: UpdateUserParams) => Promise<Record<string, string>>;
+    };
+    source?: string;
+}
+
+export { type BespokeUserInfo as B, CMS_ROLES as C, type SearchUserResult as S, type BespokeUserData as a, addRoleTypes as b, type BespokeRole as c, type BespokeUserProfile as d, type BespokeAuthOptions as e };

package/dist/auth.d.mts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { B as BespokeUserInfo, a as BespokeUserData } from './auth-D3PWImeZ.mjs';
+export { e as BespokeAuthOptions, c as BespokeRole, S as BespokeSearchUserResult, d as BespokeUserProfile, C as CMS_ROLES, b as addRoleTypes } from './auth-D3PWImeZ.mjs';
+import { UseSessionOptions } from 'next-auth/react';
+export { SessionProvider as BespokeUserProvider } from 'next-auth/react';
+import { ButtonProps, MenuItemProps, MenuProps } from '@mantine/core';
+export { S as BespokeSearchUsersParams, U as BespokeUpdateUserParams } from './types-WI9fSG9b.mjs';
+import 'next-auth';
+import 'sequelize';
+
+declare function withPageRoleAuthRequired(params: {
+    allowedRoles: string[];
+    SuccessComponent: React.ComponentType<{
+        user: BespokeUserInfo;
+    }>;
+    FailureComponent: React.ComponentType;
+}): (props: any) => react_jsx_runtime.JSX.Element;
+
+declare function useBespokeUser(options?: UseSessionOptions<boolean>): BespokeUserData;
+
+type BespokeLoginBtnTranslations = {
+    "Welcome message"?: string;
+    "Disconnect"?: string;
+    "Go to editor"?: string;
+    "Signing in"?: string;
+    "Sign in"?: string;
+};
+type BespokeLoginBtnProps = {
+    buttonProps?: ButtonProps;
+    editorMenuItemProps?: MenuItemProps;
+    editorMenuItemRoute?: string;
+    logoutButtonProps?: ButtonProps;
+    menuProps?: MenuProps;
+    options?: React.ReactNode;
+    optionsPosition?: string;
+    translations?: BespokeLoginBtnTranslations;
+    withEditorMenuItem?: boolean;
+    withSession?: boolean;
+};
+declare function BespokeLoginBtn({ buttonProps, editorMenuItemProps, editorMenuItemRoute, logoutButtonProps, menuProps, options, optionsPosition, translations, withEditorMenuItem, withSession, }: BespokeLoginBtnProps): react_jsx_runtime.JSX.Element;
+
+export { BespokeLoginBtn, BespokeUserData, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, useBespokeUser };

package/dist/auth.js

@@ -1 +1 @@
-import {useRouter}from'next/router';import {useEffect,useMemo}from'react';import {SessionProvider,useSession,signIn,signOut}from'next-auth/react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Menu,Button,Text,Avatar}from'@mantine/core';import {IconUserCircle,IconLogout,IconEdit}from'@tabler/icons-react';import $ from'next/link';function T(o={required:false}){let{update:i,data:s,status:a}=useSession(o);return {update:i,user:s?.user,status:a,isLoading:a==="loading"}}var g=T;function w(o){let{SuccessComponent:i,FailureComponent:s}=o,a=new Set(o.allowedRoles);return function(n){let{user:m,status:r}=g(),l=useRouter();if(useEffect(()=>{r==="unauthenticated"&&signIn();},[r,l]),r==="loading")return jsx("div",{children:"Loading..."});if(!m)return jsx(s,{...n});let y=m.bespoke_roles||[];return a.size===0||y.some(t=>a.has(t))?jsx(i,{user:m,...n}):jsx(s,{...n})}}var N=SessionProvider;var p={ADMIN:"Admin",EDITOR:"Editor",WRITER:"Writer"},I={APP:"App",USER:"User"},z=o=>{let i=Object.values(p);return o?o.map(s=>({...s,type:i.includes(s.name)?I.APP:I.USER})):[]};function J({buttonProps:o={},editorMenuItemProps:i={},editorMenuItemRoute:s="/cms",logoutButtonProps:a={},menuProps:U={},options:n="",optionsPosition:m="bottom",translations:r={},withEditorMenuItem:l=true,withSession:y=true}){let{user:t,isLoading:P}=g(),b=useMemo(()=>t?.bespoke_roles||[],[t]),k=useMemo(()=>p&&Object.keys(p).length>0&&Object.keys(p).some(S=>b.includes(p[S])),[b]),x={leftSection:jsx(IconUserCircle,{}),...o};if(t&&!P){let S={...i},M={color:"red",fullWidth:true,leftSection:jsx(IconLogout,{size:14}),size:"xs",variant:"subtle",...a},v={shadow:"md",width:"auto",position:"bottom",...U},h=jsx($,{href:s,passHref:true,children:jsx(Menu.Item,{icon:jsx(IconEdit,{size:14}),...S,children:r["Go to editor"]||"Go to editor"})});return jsxs(Menu,{...v,children:[jsx(Menu.Target,{children:jsx(Button,{...x,children:`${r["Welcome message"]||`Hi, ${t.name||t.email}`}`})}),jsxs(Menu.Dropdown,{children:[m==="top"&&jsxs(Fragment,{children:[l&&k&&h,n,(n||l&&k)&&jsx(Menu.Divider,{})]}),y&&jsxs(Menu.Item,{component:"span",style:{pointerEvents:"none"},icon:jsx(Avatar,{src:t.picture,radius:"md"}),children:[jsx(Text,{size:"sm",weight:500,children:t.name}),jsx(Text,{color:"dimmed",size:"xs",children:t.email})]}),jsx(Button,{onClick:()=>signOut({callbackUrl:process.env.NEXT_PUBLIC_REPORTS_BASE_URL||"/"}),...M,children:r.Disconnect||"Disconnect"}),m==="bottom"&&jsxs(Fragment,{children:[(n||l&&k)&&jsx(Menu.Divider,{}),l&&k&&h,n]})]})]})}return jsx(Button,{onClick:()=>signIn(),loading:P,...x,children:P?r["Signing in"]||"Signing in...":r["Sign in"]||"Sign in"})}var X=J;export{X as BespokeLoginBtn,N as BespokeUserProvider,w as BespokeWithPageRoleAuthRequired,p as CMS_ROLES,z as addRoleTypes,g as useBespokeUser};
+import {useRouter}from'next/router';import {useEffect,useMemo}from'react';import {SessionProvider,useSession,signIn,signOut}from'next-auth/react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Menu,Button,Text,Avatar}from'@mantine/core';import {IconUserCircle,IconLogout,IconEdit}from'@tabler/icons-react';import $ from'next/link';function T(o={required:false}){let{update:i,data:s,status:a}=useSession(o);return {update:i,user:s?.user,status:a,isLoading:a==="loading"}}var f=T;function w(o){let{SuccessComponent:i,FailureComponent:s}=o,a=new Set(o.allowedRoles);return function(n){let{user:m,status:r}=f(),l=useRouter();if(useEffect(()=>{r==="unauthenticated"&&signIn();},[r,l]),r==="loading")return jsx("div",{children:"Loading..."});if(!m)return jsx(s,{...n});let y=m.bespoke_roles||[];return a.size===0||y.some(t=>a.has(t))?jsx(i,{user:m,...n}):jsx(s,{...n})}}var N=SessionProvider;var p={ADMIN:"Admin",EDITOR:"Editor",WRITER:"Writer"},I={APP:"App",USER:"User"},z=o=>{let i=Object.values(p);return o?o.map(s=>({...s,type:i.includes(s.name)?I.APP:I.USER})):[]};function J({buttonProps:o={},editorMenuItemProps:i={},editorMenuItemRoute:s="/cms",logoutButtonProps:a={},menuProps:U={},options:n="",optionsPosition:m="bottom",translations:r={},withEditorMenuItem:l=true,withSession:y=true}){let{user:t,isLoading:S}=f(),b=useMemo(()=>t?.bespoke_roles||[],[t]),k=useMemo(()=>p&&Object.keys(p).length>0&&Object.keys(p).some(P=>b.includes(p[P])),[b]),x={leftSection:jsx(IconUserCircle,{}),...o};if(t&&!S){let P={...i},M={color:"red",fullWidth:true,leftSection:jsx(IconLogout,{size:14}),size:"xs",variant:"subtle",...a},v={shadow:"md",width:"auto",position:"bottom",...U},h=jsx($,{href:s,passHref:true,children:jsx(Menu.Item,{leftSection:jsx(IconEdit,{size:14}),...P,children:r["Go to editor"]||"Go to editor"})});return jsxs(Menu,{...v,children:[jsx(Menu.Target,{children:jsx(Button,{...x,children:`${r["Welcome message"]||`Hi, ${t.name||t.email}`}`})}),jsxs(Menu.Dropdown,{children:[m==="top"&&jsxs(Fragment,{children:[l&&k&&h,n,(n||l&&k)&&jsx(Menu.Divider,{})]}),y&&jsxs(Menu.Item,{component:"span",style:{pointerEvents:"none"},leftSection:jsx(Avatar,{src:t.picture,radius:"md"}),children:[jsx(Text,{size:"sm",fw:500,children:t.name}),jsx(Text,{c:"dimmed",size:"xs",children:t.email})]}),jsx(Button,{onClick:()=>signOut({callbackUrl:process.env.NEXT_PUBLIC_REPORTS_BASE_URL||"/"}),...M,children:r.Disconnect||"Disconnect"}),m==="bottom"&&jsxs(Fragment,{children:[(n||l&&k)&&jsx(Menu.Divider,{}),l&&k&&h,n]})]})]})}return jsx(Button,{onClick:()=>signIn(),loading:S,...x,children:S?r["Signing in"]||"Signing in...":r["Sign in"]||"Sign in"})}var X=J;export{X as BespokeLoginBtn,N as BespokeUserProvider,w as BespokeWithPageRoleAuthRequired,p as CMS_ROLES,z as addRoleTypes,f as useBespokeUser};

package/dist/cms.css

@@ -1 +1 @@
-.mantine-Prism-root.cr-variable{font-size:11px;padding:0}.mantine-Prism-root.cr-variable .mantine-Prism-code{background-color:transparent!important;padding:0}.cr-variable-accordion .mantine-Accordion-item{border-bottom:0}.cr-variable-accordion .mantine-Accordion-control{padding:2px}.cr-variable-accordion .mantine-Accordion-contentInner{padding:0}.cr-variable-accordion .mantine-Accordion-icon{margin-right:4px}.cr-monaco-container{height:100%}.selector-option-default-col{width:60px}.required:after{content:" *";color:red}.cr-block-output{align-items:stretch;margin:0;position:relative}.cr-block-output .cr-block-output-editor{display:flex;flex-direction:column}.cr-block-output .cr-block-output-mode-control{position:absolute;right:0;top:0}.mantine-Header-root~.mantine-AppShell-body{min-height:calc(100vh - 50px)}.cms-section-controls{height:0}.cms-section-controls button{background-color:#fff;opacity:0;transition:opacity .1s;z-index:2}.cms-section-container:hover>.cms-section-controls button{opacity:1}.cms-section-container:hover .cms-section-header,.cms-section-container:hover .cms-section-click-to-edit,.cms-section-header.active{opacity:1}.cms-section-container:hover .cms-section-overlay,.cms-section-container.isDragging .cms-section-overlay{opacity:.4}.cms-section-container .cms-section-content{min-height:20px}.mantine-Modal-body{max-height:90vw}.mantine-Prism-root pre{font-size:12px;line-height:1.25}
+.C{z-index:99;overflow:hidden;transition:width .3s;box-shadow:0 4px 15px 5px #0000000d}.D{flex:1}.E{flex-grow:1}.f{display:block;width:100%}.f:hover{background-color:var(--mantine-color-gray-2)!important;transition:background-color .2s}.F{flex-shrink:0}.G{border:none;background-color:var(--mantine-color-blue-0);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-blue-7);font-size:.75rem;font-weight:700;width:80px}.H{font-size:.75rem}.I{pointer-events:none}.J{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.h.g{font-size:11px;padding:0}.h.g .K{background-color:transparent!important;padding:0}.i .L{border-bottom:0}.i .M{padding:2px}.i .N{padding:0}.i .O{margin-right:4px}.P{border-top-right-radius:0;border-bottom-right-radius:0}.Q{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid #fff;background-color:#e7f5ff;min-height:1.875rem;height:1.875rem;width:1.875rem;font-size:.75rem}.R:hover{background-color:#ebebeb}.x{box-sizing:border-box;z-index:99;transition:right .4s;overflow:hidden;background:#f1f3f5}.x[data-dragging-over=true]{background:#e7f5ff}.a{transition:background-color .45s}.a .b{opacity:0;transition:opacity .45s}.a:hover{background-color:#e9ecefe6!important}.a:hover .b{opacity:1}.m{border:none;border-radius:2px}.m[data-active=true]{border:1px solid #74c0fc}.o{background:inherit;border:1px solid transparent}.o[data-dragging-over=true]{background:#e7f5ff}.o .u{visibility:hidden}.o:hover .u{visibility:visible}.o:hover{border:1px solid #96f2d7}.n{border:1px solid transparent;resize:horizontal}.n:hover{border:1px solid transparent}.n[data-show-outline=true]:hover{border:1px solid var(--mantine-color-blue-2)}.n[data-show-outline=true]:hover:before{position:absolute;top:0;left:0;font-size:8px;color:var(--mantine-color-blue-5);transform:translateY(-100%);content:attr(data-block-label);width:-moz-fit-content;width:fit-content}.S{height:100%}.l{position:"absolute";top:"50%";z-index:10;opacity:.55}.l:hover{opacity:1}.l[data-direction=left]{left:16px}.l[data-direction=right]{right:16px}.T{table-layout:fixed}.U{min-height:100px;max-height:350px;overflow-x:"auto";background:red}.V{padding:5px!important;text-wrap:wrap}.v{display:block}@media(min-width:1000px){.v{display:none}}.y{display:none}@media(min-width:1000px){.y{display:block}}.W{border-radius:4px;transform:translate(-50%);z-index:20}.w{flex-direction:column}@media(min-width:62em){.w{flex-direction:row}}.k{max-width:100%;min-width:unset}@media(min-width:62em){.k{max-width:var(--column-max-width);min-width:300px}}.z{position:relative}.z:before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:calc(.875rem + var(--level) * 1.5rem);width:.0625rem;background-color:#dee2e6;z-index:0}.d{display:flex;gap:1rem;align-items:center;list-style-type:none}.d[data-align=left]{justify-content:flex-start}.d[data-align=center]{justify-content:center}.d[data-align=right]{justify-content:flex-end}.r{display:flex}.r[data-align=left]{justify-content:flex-start}.r[data-align=center]{justify-content:center}.r[data-align=right]{justify-content:flex-end}.r li{margin-right:1rem}.j{display:flex}.j .chart{flex:1 1 100%}.X{width:60px}.Z:after{content:" *";color:red}.Y{background-color:transparent}.Y[data-selected=true]{background-color:#e7f5ff}.t{font-size:14px;line-height:1.2;background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-4);border-width:1px;border-style:solid;border-radius:var(--mantine-radius-md);padding-left:var(--mantine-spacing-xs);padding-right:var(--mantine-spacing-xs);font-weight:400}.t._{color:var(--mantine-color-gray-7);background-color:var(--mantine-color-gray-1)}.t:focus-visible{outline-color:var(--mantine-color-blue-5);background-color:var(--mantine-color-gray-0)}.t code{font-family:monospace;color:var(--mantine-color-blue-6);font-weight:700;letter-spacing:.02em}.t .ee:first-of-type:before{color:var(--mantine-color-gray-6);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.oe{align-items:stretch;margin:0;position:relative}.re{display:flex;flex-direction:column}.te{position:absolute;right:0;top:0}.ie{flex-grow:1;display:flex;flex-direction:column}.ae{flex-grow:1}.ne{align-self:stretch;display:flex;flex-direction:column;height:100%;position:relative}.le{align-self:stretch;display:flex;flex-direction:column;height:100%;border-left:2px solid var(--mantine-color-gray-0)}.de{display:flex;flex-direction:column;border-left:2px solid var(--mantine-color-gray-0)}.ce~.se{min-height:calc(100vh - 50px)}.p{height:0}.p button{background-color:#fff;opacity:0;transition:opacity .1s;z-index:2}.e:hover>.p button{opacity:1}.e:hover .q,.e:hover .pe,.q.fe{opacity:1}.e:hover .A,.e.he .A{opacity:.4}.e .ge{min-height:20px}.xe{max-height:90vw}.be pre{font-size:12px;line-height:1.25}.me{overflow:hidden;border-right:1px solid #dee2e6;flex-shrink:0;flex-grow:0}.B{border:1px solid transparent;cursor:default}.B:hover{border:1px solid blue}.c{cursor:default;border:1px solid transparent}.c .ue{color:var(--section-color)}.c[data-active=true]{border:1px solid #dee2e6}.c:hover{border:1px solid #339af0}.ve{overflow:hidden;border-left:1px solid #dee2e6;flex-shrink:0;flex-grow:0}.s{backdrop-filter:none;opacity:0}.s button{display:none}.s:hover{opacity:1;backdrop-filter:blur(.2375rem)}.s:hover button{display:flex}

package/dist/cms.d.mts

@@ -0,0 +1,13 @@
+import { NotificationsProps } from '@mantine/notifications';
+
+interface BespokeManagerOptions {
+    title?: string;
+    notifications?: NotificationsProps;
+    pathSegment?: string;
+    locale?: string;
+    profilePrefix?: string;
+    previewPrefix?: string | null;
+}
+declare function BespokeManager(options: BespokeManagerOptions): React.FC;
+
+export { BespokeManager, type BespokeManagerOptions };