dara-core 1.16.22__py3-none-any.whl → 1.16.23__py3-none-any.whl

dara/core/definitions.py

@@ -70,6 +70,11 @@ DEFAULT_ERROR_TITLE = 'Unexpected error occurred'
 DEFAULT_ERROR_DESCRIPTION = 'Try again or contact the application owner'
 
 
+def _kebab_to_camel(string: str):
+    chunks = string.split('-')
+    return chunks[0] + ''.join([chunk[0].upper() + chunk[1:].lower() for chunk in chunks[1:]])
+
+
 class ErrorHandlingConfig(BaseModel):
     title: str = DEFAULT_ERROR_TITLE
     """Title to display in the error boundary"""
@@ -77,8 +82,27 @@ class ErrorHandlingConfig(BaseModel):
     description: str = DEFAULT_ERROR_DESCRIPTION
     """Description to display in the error boundary"""
 
-    raw_css: Optional[Union[CSSProperties, dict, str]] = None
-    """Raw styling to apply to the displayed error boundary"""
+    raw_css: Optional[Any] = None
+    """
+    Raw styling to apply to the displayed error boundary.
+    Accepts a CSSProperties, dict, str, or NonDataVariable.
+    """
+
+    @field_validator('raw_css', mode='before')
+    @classmethod
+    def validate_raw_css(cls, value):
+        from dara.core.interactivity.non_data_variable import NonDataVariable
+
+        if isinstance(value, str):
+            return str
+        if isinstance(value, dict):
+            return {_kebab_to_camel(k): v for k, v in value.items()}
+        if isinstance(value, NonDataVariable):
+            return value
+        if isinstance(value, CSSProperties):
+            return value
+
+        raise ValueError(f'raw_css must be a CSSProperties, dict, str, or NonDataVariable, got {type(value)}')
 
     def model_dump(self, *args, **kwargs):
         result = super().model_dump(*args, **kwargs)
@@ -120,14 +144,15 @@ class ComponentInstance(BaseModel):
     required_routes: ClassVar[List[ApiRoute]] = []
     """List of routes the component depends on. Will be implicitly added to the app if this component is used"""
 
-    raw_css: Optional[Union[CSSProperties, dict, str]] = None
+    raw_css: Optional[Any] = None
     """
     Raw styling to apply to the component.
-    Can be an dict/CSSProperties instance representing the `styles` tag, or a string injected directly into the CSS of the wrapping component.
+    Can be an dict/CSSProperties instance representing the `styles` tag, a string injected directly into the CSS of the wrapping component,
+    or a NonDataVariable resoling to either of the above.
 
     ```python
 
-    from dara.core import CSSProperties
+    from dara.core import CSSProperties, Variable
 
     # `style` - use the class for autocompletion/typesense
     Stack(..., raw_css=CSSProperties(maxWidth='100px'))
@@ -140,6 +165,9 @@ class ComponentInstance(BaseModel):
     max-width: 100px;
     \"\"\")
 
+    css_var = Variable('color: red;')
+    Stack(..., raw_css=css_var)
+
     ```
     """
 
@@ -173,17 +201,23 @@ class ComponentInstance(BaseModel):
 
     @field_validator('raw_css', mode='before')
     @classmethod
-    def parse_css(cls, css: Optional[Union[CSSProperties, dict, str]]):
+    def parse_css(cls, css: Optional[Any]):
+        from dara.core.interactivity.non_data_variable import NonDataVariable
+
         # If it's a plain dict, change kebab case to camel case
         if isinstance(css, dict):
+            return {_kebab_to_camel(k): v for k, v in css.items()}
+
+        if isinstance(css, NonDataVariable):
+            return css
 
-            def kebab_to_camel(string: str):
-                chunks = string.split('-')
-                return chunks[0] + ''.join([chunk[0].upper() + chunk[1:].lower() for chunk in chunks[1:]])
+        if isinstance(css, CSSProperties):
+            return css
 
-            return {kebab_to_camel(k): v for k, v in css.items()}
+        if isinstance(css, str):
+            return css
 
-        return css
+        raise ValueError(f'raw_css must be a CSSProperties, dict, str, or NonDataVariable, got {type(css)}')
 
     @classmethod
     def isinstance(cls, obj: Any) -> bool:
@@ -399,7 +433,6 @@ class BaseFallback(StyledComponentInstance):
 
 ComponentInstance.model_rebuild()
 
-
 ComponentInstanceType = Union[ComponentInstance, Callable[..., ComponentInstance]]
 
 

dara/core/umd/dara.core.umd.js

@@ -17386,6 +17386,62 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   var _baseIteratee = baseIteratee$3;
   var e$2 = "object" == typeof navigator ? navigator.platform : "";
   /Mac|iPod|iPhone|iPad/.test(e$2);
+  function useIMEEnter({ onKeyDown: userKeyDown, onKeyUp: userKeyUp, onCompositionStart: userCompStart, onCompositionEnd: userCompEnd }) {
+    const isComposingRef = React.useRef(false);
+    const justEndedRef = React.useRef(false);
+    const handleCompositionStart = React.useCallback((e2) => {
+      isComposingRef.current = true;
+      userCompStart === null || userCompStart === void 0 ? void 0 : userCompStart(e2);
+    }, [userCompStart]);
+    const handleCompositionEnd = React.useCallback((e2) => {
+      isComposingRef.current = false;
+      justEndedRef.current = true;
+      userCompEnd === null || userCompEnd === void 0 ? void 0 : userCompEnd(e2);
+    }, [userCompEnd]);
+    const handleKeyDownCapture = React.useCallback((e2) => {
+      if (isComposingRef.current) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        return;
+      }
+      if (justEndedRef.current) {
+        if (e2.which === 229) {
+          e2.preventDefault();
+          e2.stopPropagation();
+          return;
+        }
+        justEndedRef.current = false;
+      }
+    }, []);
+    const handleKeyDown = React.useCallback((e2) => {
+      if (isComposingRef.current) {
+        return;
+      }
+      userKeyDown === null || userKeyDown === void 0 ? void 0 : userKeyDown(e2);
+    }, [userKeyDown]);
+    const handleKeyUpCapture = React.useCallback((e2) => {
+      if (isComposingRef.current || justEndedRef.current) {
+        justEndedRef.current = false;
+        e2.preventDefault();
+        e2.stopPropagation();
+      }
+    }, []);
+    const handleKeyUp = React.useCallback((e2) => {
+      if (isComposingRef.current || justEndedRef.current) {
+        justEndedRef.current = false;
+        return;
+      }
+      userKeyUp === null || userKeyUp === void 0 ? void 0 : userKeyUp(e2);
+    }, [userKeyUp]);
+    return {
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      onKeyDownCapture: handleKeyDownCapture,
+      onKeyDown: handleKeyDown,
+      onKeyUpCapture: handleKeyUpCapture,
+      onKeyUp: handleKeyUp
+    };
+  }
   globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
@@ -26380,7 +26436,14 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         onComplete();
       }
     };
-    return jsxRuntime.exports.jsxs(InputWrapper$3, { className, style, children: [jsxRuntime.exports.jsx(PrimaryInput, Object.assign({}, rest, { defaultValue: initialValue, isErrored: !!errorMsg, onChange: handleChange, onKeyDown: handleKeyDown, ref, type, min: minValue, max: maxValue })), errorMsg && jsxRuntime.exports.jsx(ErrorMessage$1, { children: errorMsg })] });
+    const handlers = useIMEEnter({
+      onKeyDown: handleKeyDown,
+      onKeyUp: rest.onKeyUp,
+      onCompositionStart: rest.onCompositionStart,
+      onCompositionEnd: rest.onCompositionEnd
+    });
+    const spreadProps = Object.assign(Object.assign({}, rest), handlers);
+    return jsxRuntime.exports.jsxs(InputWrapper$3, { className, style, children: [jsxRuntime.exports.jsx(PrimaryInput, Object.assign({}, spreadProps, { defaultValue: initialValue, isErrored: !!errorMsg, onChange: handleChange, ref, type, min: minValue, max: maxValue })), errorMsg && jsxRuntime.exports.jsx(ErrorMessage$1, { children: errorMsg })] });
   });
   Input$1.displayName = "Input";
   const Wrapper$7 = styled__default.default.div`
@@ -51842,244 +51905,6 @@ Inferred class string: "${iconClasses}."`
       return /* @__PURE__ */ React__default.default.createElement(Icon, { ...props, className: `${String((_a = props.className) != null ? _a : "")} ${iconClasses}` });
     };
   }
-  function flexStyles(props, displayCtx2, useDisplayContext) {
-    let flexBasis = props.basis;
-    let flexShrink = props.shrink;
-    let flexGrow = props.grow;
-    if (useDisplayContext) {
-      if (props.width && displayCtx2.direction === "horizontal") {
-        flexBasis != null ? flexBasis : flexBasis = props.width;
-        flexShrink != null ? flexShrink : flexShrink = "0";
-        flexGrow != null ? flexGrow : flexGrow = "0";
-      }
-      if (props.height && displayCtx2.direction === "vertical") {
-        flexBasis != null ? flexBasis : flexBasis = props.height;
-        flexShrink != null ? flexShrink : flexShrink = "0";
-        flexGrow != null ? flexGrow : flexGrow = "0";
-      }
-    }
-    if (props.hug || props.hug !== false && displayCtx2.hug) {
-      flexBasis != null ? flexBasis : flexBasis = "content";
-      flexShrink != null ? flexShrink : flexShrink = "1";
-      flexGrow != null ? flexGrow : flexGrow = "0";
-    }
-    return { flexBasis, flexGrow, flexShrink };
-  }
-  function parseRawCss(rawCss) {
-    const isRawObject = typeof rawCss === "object" && rawCss !== null && rawCss !== void 0;
-    const componentCss = !isRawObject && typeof rawCss === "string" ? rawCss : "";
-    const styles2 = isRawObject ? rawCss : {};
-    return [styles2, componentCss];
-  }
-  function useComponentStyles(props, useDisplayContext = true) {
-    const [rawStyles, rawCss] = parseRawCss(props.raw_css);
-    const displayCtx$1 = React.useContext(displayCtx);
-    const flexProps = flexStyles(props, displayCtx$1, useDisplayContext);
-    const styles2 = React.useMemo(() => {
-      var _a;
-      const stylesObj = {
-        backgroundColor: props.background,
-        border: props.border,
-        borderRadius: props.border_radius,
-        color: props.color,
-        fontFamily: props.font,
-        fontSize: props.font_size,
-        fontStyle: props.italic ? "italic" : "normal",
-        fontWeight: props.bold ? "bold" : "normal",
-        gap: props.gap,
-        height: props.height,
-        margin: props.margin,
-        maxHeight: props.max_height,
-        maxWidth: props.max_width,
-        minHeight: props.min_height,
-        minWidth: props.min_width,
-        overflow: props.overflow,
-        padding: props.padding,
-        position: props.position,
-        textDecoration: props.underline ? "underline" : "none",
-        width: props.width,
-        ...flexProps,
-        ...rawStyles,
-        ...(_a = props.style) != null ? _a : {}
-      };
-      return Object.fromEntries(Object.entries(stylesObj).filter(([, v2]) => v2 !== null && v2 !== void 0));
-    }, [useDeepCompare(props)]);
-    return [styles2, rawCss];
-  }
-  function useUrlSync(options) {
-    const urlSerializer = React.useCallback((val) => {
-      if (val === void 0 || val === null) {
-        return "";
-      }
-      if (["string", "number", "boolean"].includes(typeof val)) {
-        return String(val);
-      }
-      return JSON.stringify(val);
-    }, []);
-    const urlDeserializer = React.useCallback((val) => {
-      if (val === "") {
-        return void 0;
-      }
-      try {
-        return JSON.parse(val);
-      } catch {
-        return val;
-      }
-    }, []);
-    const listenChangeURL = React.useCallback((handler) => {
-      const unregister = options.history.listen(() => {
-        handler();
-      });
-      return () => unregister();
-    }, []);
-    const memoryOptions = {
-      getURL: () => {
-        return window.location.origin + options.history.location.pathname + options.history.location.search;
-      },
-      pushURL: (url) => {
-        options.history.push(url.replace(window.location.origin, ""));
-      },
-      replaceURL: (url) => {
-        options.history.replace(url.replace(window.location.origin, ""));
-      }
-    };
-    return {
-      browserInterface: {
-        listenChangeURL,
-        ...options.memory_TEST ? memoryOptions : {}
-      },
-      deserialize: urlDeserializer,
-      location: { part: "queryParams" },
-      serialize: urlSerializer
-    };
-  }
-  const Wrapper$2 = styled__default.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-    height: 100%;
-`;
-  const FlashingDots = styled__default.default.div`
-    position: relative;
-
-    width: 10px;
-    height: 10px;
-
-    color: ${(props) => props.theme.colors.grey4};
-
-    background-color: ${(props) => props.theme.colors.grey4};
-    border-radius: 5px;
-
-    animation: dot-flashing 1s infinite linear alternate;
-    animation-delay: 0.5s;
-
-    &::before,
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        display: inline-block;
-    }
-
-    &::before {
-        left: -15px;
-
-        width: 10px;
-        height: 10px;
-
-        color: ${(props) => props.theme.colors.grey4};
-
-        background-color: ${(props) => props.theme.colors.grey4};
-        border-radius: 5px;
-
-        animation: dot-flashing 1s infinite alternate;
-        animation-delay: 0s;
-    }
-
-    &::after {
-        left: 15px;
-
-        width: 10px;
-        height: 10px;
-
-        color: ${(props) => props.theme.colors.grey4};
-
-        background-color: ${(props) => props.theme.colors.grey4};
-        border-radius: 5px;
-
-        animation: dot-flashing 1s infinite alternate;
-        animation-delay: 1s;
-    }
-
-    @keyframes dot-flashing {
-        0% {
-            background-color: ${(props) => props.theme.colors.grey4};
-        }
-
-        50%,
-        100% {
-            background-color: ${(props) => props.theme.colors.grey3};
-        }
-    }
-`;
-  function Dots(props) {
-    return /* @__PURE__ */ React__default.default.createElement(Wrapper$2, { className: props.className, style: props.style }, /* @__PURE__ */ React__default.default.createElement(FlashingDots, { "data-testid": "LOADING" }));
-  }
-  const StyledDots$1 = injectCss(Dots);
-  function DefaultFallback(props) {
-    const [style, css2] = useComponentStyles(props);
-    return /* @__PURE__ */ React__default.default.createElement(StyledDots$1, { $rawCss: css2, style });
-  }
-  const Center = styled__default.default.div`
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${(props) => props.colored ? props.theme.colors.blue1 : ""};
-`;
-  const CenteredDivWithGap = styled__default.default(Center)`
-    gap: 0.6rem;
-    margin: 10px;
-    text-align: center;
-`;
-  const errorMessages = {
-    "403": {
-      description: "You are not authorised to access this application. Please contact the application owner to enable access.",
-      styling: "error",
-      title: "We were not able to authenticate you"
-    },
-    default: {
-      description: "Your login session may have expired. Try again.",
-      styling: "primary",
-      title: "We were not able to authenticate you"
-    }
-  };
-  function ErrorPage() {
-    const { search } = useLocation();
-    const query = React.useMemo(() => new URLSearchParams(search), [search]);
-    const code = query.get("code");
-    const errorConfig = code && errorMessages[code] || errorMessages.default;
-    return /* @__PURE__ */ React__default.default.createElement(CenteredDivWithGap, null, /* @__PURE__ */ React__default.default.createElement("h1", null, errorConfig.title), /* @__PURE__ */ React__default.default.createElement("p", null, errorConfig.description), /* @__PURE__ */ React__default.default.createElement(Button$1, { href: "/login", styling: errorConfig.styling }, "Retry"));
-  }
-  function onTokenChange(cb) {
-    return store.subscribe(getTokenKey(), cb);
-  }
-  function getSessionToken() {
-    return store.getValueSync(getTokenKey());
-  }
-  function setSessionToken(token) {
-    store.setValue(getTokenKey(), token);
-  }
-  function useSessionToken() {
-    return React__namespace.useSyncExternalStore(onTokenChange, getSessionToken);
-  }
   class EventBus {
     constructor(parentBus) {
       __privateAdd(this, _events$, new Subject());
@@ -52112,19 +51937,6 @@ Inferred class string: "${iconClasses}."`
     }, [bus, onEvent]);
     return /* @__PURE__ */ React__namespace.createElement(EventBusContext.Provider, { value: bus }, children);
   }
-  function useActionRegistry() {
-    const { actionRegistry: actions } = React.useContext(registriesCtx);
-    const get2 = React.useCallback(
-      (impl) => {
-        if (actions && actions[impl.name]) {
-          return actions[impl.name];
-        }
-        throw new Error(`Attempted to load an action (${impl.name}) that is not in the registry`);
-      },
-      [actions]
-    );
-    return React.useMemo(() => ({ get: get2 }), [get2]);
-  }
   const _StateSynchronizer = class {
     constructor() {
       __privateAdd(this, _observers, /* @__PURE__ */ new Map());
@@ -54182,6 +53994,18 @@ Inferred class string: "${iconClasses}."`
     escapePathComponent,
     unescapePathComponent
   });
+  function onTokenChange(cb) {
+    return store.subscribe(getTokenKey(), cb);
+  }
+  function getSessionToken() {
+    return store.getValueSync(getTokenKey());
+  }
+  function setSessionToken(token) {
+    store.setValue(getTokenKey(), token);
+  }
+  function useSessionToken() {
+    return React__namespace.useSyncExternalStore(onTokenChange, getSessionToken);
+  }
   const STORE_EXTRAS_MAP = /* @__PURE__ */ new Map();
   const STORE_VARIABLE_MAP = /* @__PURE__ */ new Map();
   const STORE_SEQUENCE_MAP = /* @__PURE__ */ new Map();
@@ -54495,6 +54319,246 @@ Inferred class string: "${iconClasses}."`
     const deferred = useDeferLoadable(loadable);
     return [deferred, setLoadable];
   }
+  function flexStyles(props, displayCtx2, useDisplayContext) {
+    let flexBasis = props.basis;
+    let flexShrink = props.shrink;
+    let flexGrow = props.grow;
+    if (useDisplayContext) {
+      if (props.width && displayCtx2.direction === "horizontal") {
+        flexBasis != null ? flexBasis : flexBasis = props.width;
+        flexShrink != null ? flexShrink : flexShrink = "0";
+        flexGrow != null ? flexGrow : flexGrow = "0";
+      }
+      if (props.height && displayCtx2.direction === "vertical") {
+        flexBasis != null ? flexBasis : flexBasis = props.height;
+        flexShrink != null ? flexShrink : flexShrink = "0";
+        flexGrow != null ? flexGrow : flexGrow = "0";
+      }
+    }
+    if (props.hug || props.hug !== false && displayCtx2.hug) {
+      flexBasis != null ? flexBasis : flexBasis = "content";
+      flexShrink != null ? flexShrink : flexShrink = "1";
+      flexGrow != null ? flexGrow : flexGrow = "0";
+    }
+    return { flexBasis, flexGrow, flexShrink };
+  }
+  function parseRawCss(rawCss) {
+    const isRawObject = typeof rawCss === "object" && rawCss !== null && rawCss !== void 0;
+    const componentCss = !isRawObject && typeof rawCss === "string" ? rawCss : "";
+    const styles2 = isRawObject ? rawCss : {};
+    return [styles2, componentCss];
+  }
+  function useComponentStyles(props, useDisplayContext = true) {
+    const [rawCssValue] = useVariable(props.raw_css);
+    const [rawStyles, rawCss] = parseRawCss(rawCssValue);
+    const displayCtx$1 = React.useContext(displayCtx);
+    const flexProps = flexStyles(props, displayCtx$1, useDisplayContext);
+    const styles2 = React.useMemo(() => {
+      var _a;
+      const stylesObj = {
+        backgroundColor: props.background,
+        border: props.border,
+        borderRadius: props.border_radius,
+        color: props.color,
+        fontFamily: props.font,
+        fontSize: props.font_size,
+        fontStyle: props.italic ? "italic" : "normal",
+        fontWeight: props.bold ? "bold" : "normal",
+        gap: props.gap,
+        height: props.height,
+        margin: props.margin,
+        maxHeight: props.max_height,
+        maxWidth: props.max_width,
+        minHeight: props.min_height,
+        minWidth: props.min_width,
+        overflow: props.overflow,
+        padding: props.padding,
+        position: props.position,
+        textDecoration: props.underline ? "underline" : "none",
+        width: props.width,
+        ...flexProps,
+        ...rawStyles,
+        ...(_a = props.style) != null ? _a : {}
+      };
+      return Object.fromEntries(Object.entries(stylesObj).filter(([, v2]) => v2 !== null && v2 !== void 0));
+    }, [useDeepCompare(props)]);
+    return [styles2, rawCss];
+  }
+  function useUrlSync(options) {
+    const urlSerializer = React.useCallback((val) => {
+      if (val === void 0 || val === null) {
+        return "";
+      }
+      if (["string", "number", "boolean"].includes(typeof val)) {
+        return String(val);
+      }
+      return JSON.stringify(val);
+    }, []);
+    const urlDeserializer = React.useCallback((val) => {
+      if (val === "") {
+        return void 0;
+      }
+      try {
+        return JSON.parse(val);
+      } catch {
+        return val;
+      }
+    }, []);
+    const listenChangeURL = React.useCallback((handler) => {
+      const unregister = options.history.listen(() => {
+        handler();
+      });
+      return () => unregister();
+    }, []);
+    const memoryOptions = {
+      getURL: () => {
+        return window.location.origin + options.history.location.pathname + options.history.location.search;
+      },
+      pushURL: (url) => {
+        options.history.push(url.replace(window.location.origin, ""));
+      },
+      replaceURL: (url) => {
+        options.history.replace(url.replace(window.location.origin, ""));
+      }
+    };
+    return {
+      browserInterface: {
+        listenChangeURL,
+        ...options.memory_TEST ? memoryOptions : {}
+      },
+      deserialize: urlDeserializer,
+      location: { part: "queryParams" },
+      serialize: urlSerializer
+    };
+  }
+  const Wrapper$2 = styled__default.default.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+`;
+  const FlashingDots = styled__default.default.div`
+    position: relative;
+
+    width: 10px;
+    height: 10px;
+
+    color: ${(props) => props.theme.colors.grey4};
+
+    background-color: ${(props) => props.theme.colors.grey4};
+    border-radius: 5px;
+
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        display: inline-block;
+    }
+
+    &::before {
+        left: -15px;
+
+        width: 10px;
+        height: 10px;
+
+        color: ${(props) => props.theme.colors.grey4};
+
+        background-color: ${(props) => props.theme.colors.grey4};
+        border-radius: 5px;
+
+        animation: dot-flashing 1s infinite alternate;
+        animation-delay: 0s;
+    }
+
+    &::after {
+        left: 15px;
+
+        width: 10px;
+        height: 10px;
+
+        color: ${(props) => props.theme.colors.grey4};
+
+        background-color: ${(props) => props.theme.colors.grey4};
+        border-radius: 5px;
+
+        animation: dot-flashing 1s infinite alternate;
+        animation-delay: 1s;
+    }
+
+    @keyframes dot-flashing {
+        0% {
+            background-color: ${(props) => props.theme.colors.grey4};
+        }
+
+        50%,
+        100% {
+            background-color: ${(props) => props.theme.colors.grey3};
+        }
+    }
+`;
+  function Dots(props) {
+    return /* @__PURE__ */ React__default.default.createElement(Wrapper$2, { className: props.className, style: props.style }, /* @__PURE__ */ React__default.default.createElement(FlashingDots, { "data-testid": "LOADING" }));
+  }
+  const StyledDots$1 = injectCss(Dots);
+  function DefaultFallback(props) {
+    const [style, css2] = useComponentStyles(props);
+    return /* @__PURE__ */ React__default.default.createElement(StyledDots$1, { $rawCss: css2, style });
+  }
+  const Center = styled__default.default.div`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${(props) => props.colored ? props.theme.colors.blue1 : ""};
+`;
+  const CenteredDivWithGap = styled__default.default(Center)`
+    gap: 0.6rem;
+    margin: 10px;
+    text-align: center;
+`;
+  const errorMessages = {
+    "403": {
+      description: "You are not authorised to access this application. Please contact the application owner to enable access.",
+      styling: "error",
+      title: "We were not able to authenticate you"
+    },
+    default: {
+      description: "Your login session may have expired. Try again.",
+      styling: "primary",
+      title: "We were not able to authenticate you"
+    }
+  };
+  function ErrorPage() {
+    const { search } = useLocation();
+    const query = React.useMemo(() => new URLSearchParams(search), [search]);
+    const code = query.get("code");
+    const errorConfig = code && errorMessages[code] || errorMessages.default;
+    return /* @__PURE__ */ React__default.default.createElement(CenteredDivWithGap, null, /* @__PURE__ */ React__default.default.createElement("h1", null, errorConfig.title), /* @__PURE__ */ React__default.default.createElement("p", null, errorConfig.description), /* @__PURE__ */ React__default.default.createElement(Button$1, { href: "/login", styling: errorConfig.styling }, "Retry"));
+  }
+  function useActionRegistry() {
+    const { actionRegistry: actions } = React.useContext(registriesCtx);
+    const get2 = React.useCallback(
+      (impl) => {
+        if (actions && actions[impl.name]) {
+          return actions[impl.name];
+        }
+        throw new Error(`Attempted to load an action (${impl.name}) that is not in the registry`);
+      },
+      [actions]
+    );
+    return React.useMemo(() => ({ get: get2 }), [get2]);
+  }
   async function invokeAction(input, executionId, annotatedAction, actionCtx) {
     const resolvedKwargs = Object.keys(annotatedAction.dynamic_kwargs).reduce(
       (acc, k2) => {
@@ -55811,7 +55875,8 @@ Inferred class string: "${iconClasses}."`
 `;
   function ErrorDisplay$1(props) {
     var _a, _b, _c, _d, _e2;
-    const [styles2, css2] = parseRawCss((_a = props.config) == null ? void 0 : _a.raw_css);
+    const [cssValue] = useVariable((_a = props.config) == null ? void 0 : _a.raw_css);
+    const [styles2, css2] = parseRawCss(cssValue);
     const defaultMessage = props.error instanceof UserError ? props.error.message : "Try again or contact the application owner.";
     return /* @__PURE__ */ React__default.default.createElement(ErrorDisplayWrapper, { $rawCss: css2, style: styles2 }, /* @__PURE__ */ React__default.default.createElement(ContentWrapper, null, /* @__PURE__ */ React__default.default.createElement(ErrorContent, null, /* @__PURE__ */ React__default.default.createElement(ErrorTitle$1, null, /* @__PURE__ */ React__default.default.createElement(IconWrapper, null, /* @__PURE__ */ React__default.default.createElement(ErrorIcon, { "aria-hidden": true, className: "fa-solid fa-circle-xmark fa-lg" })), (_c = (_b = props == null ? void 0 : props.config) == null ? void 0 : _b.title) != null ? _c : "Error"), /* @__PURE__ */ React__default.default.createElement(ErrorText, null, (_e2 = (_d = props == null ? void 0 : props.config) == null ? void 0 : _d.description) != null ? _e2 : defaultMessage))), props.resetErrorBoundary && /* @__PURE__ */ React__default.default.createElement(RetryButton, { onClick: () => props.resetErrorBoundary(props.error), type: "button" }, /* @__PURE__ */ React__default.default.createElement("i", { "aria-hidden": true, className: "fa-solid fa-rotate fa-xl" })));
   }

{dara_core-1.16.22.dist-info → dara_core-1.16.23.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: dara-core
-Version: 1.16.22
+Version: 1.16.23
 Summary: Dara Framework Core
 Home-page: https://dara.causalens.com/
 License: Apache-2.0
@@ -20,10 +20,10 @@ Requires-Dist: async-asgi-testclient (>=1.4.11,<2.0.0)
 Requires-Dist: certifi (>=2024.7.4)
 Requires-Dist: click (==8.1.3)
 Requires-Dist: colorama (>=0.4.6,<0.5.0)
-Requires-Dist: create-dara-app (==1.16.22)
+Requires-Dist: create-dara-app (==1.16.23)
 Requires-Dist: croniter (>=1.0.15,<3.0.0)
 Requires-Dist: cryptography (>=42.0.4)
-Requires-Dist: dara-components (==1.16.22) ; extra == "all"
+Requires-Dist: dara-components (==1.16.23) ; extra == "all"
 Requires-Dist: exceptiongroup (>=1.1.3,<2.0.0)
 Requires-Dist: fastapi (>=0.115.0,<0.116.0)
 Requires-Dist: fastapi_vite_dara (==0.4.0)
@@ -54,7 +54,7 @@ Description-Content-Type: text/markdown
 
 # Dara Application Framework
 
-<img src="https://github.com/causalens/dara/blob/v1.16.22/img/dara_light.svg?raw=true">
+<img src="https://github.com/causalens/dara/blob/v1.16.23/img/dara_light.svg?raw=true">
 
 ![Master tests](https://github.com/causalens/dara/actions/workflows/tests.yml/badge.svg?branch=master)
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
@@ -99,7 +99,7 @@ source .venv/bin/activate
 dara start
 ```
 
-![Dara App](https://github.com/causalens/dara/blob/v1.16.22/img/components_gallery.png?raw=true)
+![Dara App](https://github.com/causalens/dara/blob/v1.16.23/img/components_gallery.png?raw=true)
 
 Note: `pip` installation uses [PEP 660](https://peps.python.org/pep-0660/) `pyproject.toml`-based editable installs which require `pip >= 21.3` and `setuptools >= 64.0.0`. You can upgrade both with:
 
@@ -116,9 +116,9 @@ Explore some of our favorite apps - a great way of getting started and getting t
 
 | Dara App                                                                                                 | Description                                                                                                                                                                                                       |
 | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Large Language Model](https://github.com/causalens/dara/blob/v1.16.22/img/llm.png?raw=true)              | Demonstrates how to use incorporate a LLM chat box into your decision app to understand model insights                                                                                                            |
-| ![Plot Interactivity](https://github.com/causalens/dara/blob/v1.16.22/img/plot_interactivity.png?raw=true) | Demonstrates how to enable the user to interact with plots, trigger actions based on clicks, mouse movements and other interactions with `Bokeh` or `Plotly` plots                                                |
-| ![Graph Editor](https://github.com/causalens/dara/blob/v1.16.22/img/graph_viewer.png?raw=true)             | Demonstrates how to use the `CausalGraphViewer` component to display your graphs or networks, customising the displayed information through colors and tooltips, and updating the page based on user interaction. |
+| ![Large Language Model](https://github.com/causalens/dara/blob/v1.16.23/img/llm.png?raw=true)              | Demonstrates how to use incorporate a LLM chat box into your decision app to understand model insights                                                                                                            |
+| ![Plot Interactivity](https://github.com/causalens/dara/blob/v1.16.23/img/plot_interactivity.png?raw=true) | Demonstrates how to enable the user to interact with plots, trigger actions based on clicks, mouse movements and other interactions with `Bokeh` or `Plotly` plots                                                |
+| ![Graph Editor](https://github.com/causalens/dara/blob/v1.16.23/img/graph_viewer.png?raw=true)             | Demonstrates how to use the `CausalGraphViewer` component to display your graphs or networks, customising the displayed information through colors and tooltips, and updating the page based on user interaction. |
 
 Check out our [App Gallery](https://dara.causalens.com/gallery) for more inspiration!
 
@@ -145,9 +145,9 @@ And the supporting UI packages and tools.
 - `ui-utils` - miscellaneous utility functions
 - `ui-widgets` - widget components
 
-More information on the repository structure can be found in the [CONTRIBUTING.md](https://github.com/causalens/dara/blob/v1.16.22/CONTRIBUTING.md) file.
+More information on the repository structure can be found in the [CONTRIBUTING.md](https://github.com/causalens/dara/blob/v1.16.23/CONTRIBUTING.md) file.
 
 ## License
 
-Dara is open-source and licensed under the [Apache 2.0 License](https://github.com/causalens/dara/blob/v1.16.22/LICENSE).
+Dara is open-source and licensed under the [Apache 2.0 License](https://github.com/causalens/dara/blob/v1.16.23/LICENSE).
 

{dara_core-1.16.22.dist-info → dara_core-1.16.23.dist-info}/RECORD

@@ -12,7 +12,7 @@ dara/core/configuration.py,sha256=bWD9oL_lqCEq88I2Zr39cPt_8jZIwq5vUAyLFrsmVYQ,22
 dara/core/css.py,sha256=KWCJTPpx4tTezP9VJO3k-RSVhWwomJr-4USoLz9vNAs,1771
 dara/core/data_utils.py,sha256=5GGz4vk6srLO8HMySiAEk_xZCvmf0SeTTgVi-N4qaKY,12636
 dara/core/defaults.py,sha256=UkjWwIbo8GLyn8RZRoD3cJe174-3wHZYzvMB0hQCnMg,4150
-dara/core/definitions.py,sha256=QouD2P2XInW6bqrhPtrfIyDi8i99Au2PTBdWBtgBVrE,16713
+dara/core/definitions.py,sha256=KmJdLWwurLBRZonPz94N9947cG1jMrs-wzqtof6ubK0,17762
 dara/core/http.py,sha256=LR1Kr5Hca-Z6klNl-M8R8Q1eOfFh3hLrjVS3kVrRsKA,4658
 dara/core/interactivity/__init__.py,sha256=zZp4wO6nHZ_-IzDtlv8D5mjlutn4bckqIiSCaPoCYZw,2326
 dara/core/interactivity/actions.py,sha256=yMw8S11wj4J2HVmDsmedh9D0IZFL9hxw6WGNj7X2f6M,48198
@@ -82,7 +82,7 @@ dara/core/metrics/cache.py,sha256=bGXwjO_rSc-FkS3PnPi1mvIZf1x-hvmG113dAUk1g-Y,26
 dara/core/metrics/runtime.py,sha256=YP-6Dz0GeI9_Yr7bUk_-OqShyFySGH_AKpDO126l6es,1833
 dara/core/metrics/utils.py,sha256=aKaa_hskV3M3h4xOGZYvegDLq_OWOEUlslkQKrrPQiI,2281
 dara/core/persistence.py,sha256=-lnksbGfHwabeRjbJkceoFd0kHfCu4gK2fud8dkeDTg,18538
-dara/core/umd/dara.core.umd.js,sha256=ph5XlnK-CaIB7b2iq7NMD3IGaXT7zz0ukn4QLdNjN_8,4723511
+dara/core/umd/dara.core.umd.js,sha256=dHJvK0B3dARTocGdCvCuOVZAx4qHwwviYwX4EaxrwT4,4725934
 dara/core/umd/style.css,sha256=YQtQ4veiSktnyONl0CU1iU1kKfcQhreH4iASi1MP7Ak,4095007
 dara/core/visual/__init__.py,sha256=QN0wbG9HPQ_vXh8BO8DnBXeYLIENVTNtRmYzZf1lx7c,577
 dara/core/visual/components/__init__.py,sha256=eg6M2YcH1o-I2H3IqLaD32ExfZcXhKuH5KTM52Ow6RM,2359
@@ -106,8 +106,8 @@ dara/core/visual/themes/__init__.py,sha256=aM4mgoIYo2neBSw5FRzswsht7PUKjLthiHLmF
 dara/core/visual/themes/dark.py,sha256=UQGDooOc8ric73eHs9E0ltYP4UCrwqQ3QxqN_fb4PwY,1942
 dara/core/visual/themes/definitions.py,sha256=nS_gQvOzCt5hTmj74d0_siq_9QWuj6wNuir4VCHy0Dk,2779
 dara/core/visual/themes/light.py,sha256=-Tviq8oEwGbdFULoDOqPuHO0UpAZGsBy8qFi0kAGolQ,1944
-dara_core-1.16.22.dist-info/LICENSE,sha256=r9u1w2RvpLMV6YjuXHIKXRBKzia3fx_roPwboGcLqCc,10944
-dara_core-1.16.22.dist-info/METADATA,sha256=OaGKDjB2t-bVSdBdPCJCOz3MbS5V_Cqsb9zazY8dh-I,7507
-dara_core-1.16.22.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
-dara_core-1.16.22.dist-info/entry_points.txt,sha256=H__D5sNIGuPIhVam0DChNL-To5k8Y7nY7TAFz9Mz6cc,139
-dara_core-1.16.22.dist-info/RECORD,,
+dara_core-1.16.23.dist-info/LICENSE,sha256=r9u1w2RvpLMV6YjuXHIKXRBKzia3fx_roPwboGcLqCc,10944
+dara_core-1.16.23.dist-info/METADATA,sha256=nkpL_PljY5X2YcGsCF4jMTmvKJ8iIcfD2tbrjlsD6Rk,7507
+dara_core-1.16.23.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
+dara_core-1.16.23.dist-info/entry_points.txt,sha256=H__D5sNIGuPIhVam0DChNL-To5k8Y7nY7TAFz9Mz6cc,139
+dara_core-1.16.23.dist-info/RECORD,,