@eccenca/gui-elements 24.4.1 → 25.0.0-featurecolorwheelinputcmem7327.0

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -25,7 +25,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fullWidth?: boolean;
     /**
-     * Label is diaplayed without a box that comes with borders and background color.
+     * Label is displayed without a box that comes with borders and background color.
      */
     loose?: boolean;
     /**

package/dist/types/extensions/react-flow/edges/EdgeNew.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConnectionLineComponentProps } from "@xyflow/react";
+export declare const EdgeNew: (edgeNewProps: ConnectionLineComponentProps) => React.JSX.Element;

package/dist/types/extensions/react-flow/edges/EdgeStep.d.ts

@@ -1,10 +1,28 @@
 import React from "react";
-import { EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
-interface EdgeStepDataProps extends EdgeDefaultDataProps {
+import { Edge, EdgeProps } from "@xyflow/react";
+import { EdgeDefaultV9DataProps, EdgeDefaultV9Props } from "./EdgeDefault";
+import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
+interface EdgeStepDataV9Props extends EdgeDefaultV9DataProps {
     stepCornerRadius?: number;
 }
-export interface EdgeStepProps extends EdgeDefaultProps {
-    data?: EdgeStepDataProps;
+interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
+    stepCornerRadius?: number;
+}
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV9Props extends EdgeDefaultV9Props {
+    data?: EdgeStepDataV9Props;
+}
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {
 }
-export declare const EdgeStep: React.MemoExoticComponent<(edge: EdgeStepProps) => React.JSX.Element>;
+export type EdgeStepProps = EdgeStepV9Props | EdgeStepV12Props;
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export declare const EdgeStep: React.MemoExoticComponent<(props: EdgeStepProps) => React.JSX.Element>;
 export {};

package/dist/types/extensions/react-flow/edges/EdgeStraight.d.ts

@@ -0,0 +1 @@
+export { EdgeDefault as EdgeStraight } from "./EdgeDefault";

package/dist/types/extensions/react-flow/edges/utils.d.ts

@@ -1,4 +1,6 @@
+import { GetBezierPathParams } from "@xyflow/react";
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
 export declare const drawEdgeStraight: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: EdgeDefaultProps) => string;
+export declare const getStraightPath: (params: Omit<GetBezierPathParams, "curvature">) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 export declare const drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: EdgeStepProps) => string;

package/dist/types/extensions/react-flow/handles/HandleDefault.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
-import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { IntentTypes } from "../../../common/Intent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
@@ -25,12 +24,19 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps, Omit<React.H
     intent?: IntentTypes;
     children?: HandleContentProps["children"];
 }
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
-}
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
+export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {
 }
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {
 }
-export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
+/**
+ * Combined interface, later this will be only a copy of `HandleV12Props`.
+ */
+export type HandleDefaultProps = HandleV9Props | HandleV12Props;
 export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => React.JSX.Element>;
 export {};

package/dist/types/extensions/react-flow/index.d.ts

@@ -6,15 +6,19 @@ export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
 export * from "./handles/HandleContent";
 export * from "./handles/HandleTools";
+export * from "./edges/EdgeBezier";
 export * from "./edges/EdgeDefault";
+export * from "./edges/EdgeDefaultV12";
+export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeStep";
+export * from "./edges/EdgeStraight";
+export * from "./edges/EdgeNew";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
 export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeDefaultV12";
 export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
+export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
 export * from "./versionsupport";
-export { nodeTypes } from "./nodes/nodeTypes";
-export { edgeTypes } from "./edges/edgeTypes";

package/dist/types/extensions/react-flow/markers/MarkerArrowClosedInverse.d.ts

@@ -1,2 +1,5 @@
 import { FC } from "react";
+/**
+ * @deprecated (v26) only necessary for react flow v9, support will be removed
+ */
 export declare const MarkerArrowClosedInverse: FC;

package/dist/types/extensions/react-flow/markers/ReactFlowMarkers.d.ts

@@ -1,4 +1,23 @@
-import { FC } from "react";
+import React, { FC } from "react";
+import { IntentTypes } from "../../../common/Intent";
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
+type ReactFlowMarkerAppearance = "arrow-closed";
+interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
+    /**
+     * Visual appearance of the marker.
+     */
+    appearance?: ReactFlowMarkerAppearance;
+    /**
+     * Feedback state of the marker.
+     * SVG markers are reused by paths but they cannot inherit their state color automatically.
+     */
+    intent?: IntentTypes;
+    /**
+     * If set, then the marker orientation is reversed.
+     * Can be used if a start marker should displayed similar to an end marker.
+     */
+    reverse?: boolean;
+}
+declare const ReactFlowMarker: ({ className, appearance, intent, reverse }: ReactFlowMarkerProps) => React.JSX.Element;
 declare const ReactFlowMarkers: FC;
-export { MarkerArrowClosedInverse, ReactFlowMarkers };
+export { MarkerArrowClosedInverse, ReactFlowMarkers, ReactFlowMarker };

package/dist/types/extensions/react-flow/minimap/MiniMap.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+import { MiniMapProps as ReactFlowMiniMapV9Props, OnLoadParams } from "react-flow-renderer";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { MiniMapV12Props } from "./MiniMapV12";
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -15,5 +13,18 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
      */
     wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave">;
 }
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapProps) => React.JSX.Element>;
+export declare const MiniMap: React.MemoExoticComponent<({ flowVersion, ...otherProps }: MiniMapProps) => React.JSX.Element>;
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export declare const MiniMapV9: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV9Props) => React.JSX.Element>;
+export default MiniMap;

package/dist/types/extensions/react-flow/minimap/MiniMapV12.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
+import { MiniMapBasicProps } from "./MiniMap";
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
+}
+/**
+ * Mini-map support for for React Flow v12.
+ * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ */
+export declare const MiniMapV12: React.MemoExoticComponent<({ enableNavigation, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV12Props) => React.JSX.Element>;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -3,15 +3,15 @@ import { Position } from "react-flow-renderer";
 import { IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleDefaultProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
-type NodeContentHandleLegacyProps = HandleProps;
-type NodeContentHandleNextProps = HandleNextProps;
-type NodeContentHandleV12Props = HandleV12Props;
-export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps | NodeContentHandleV12Props;
+/**
+ * @deprecated (v26) use `HandleDefaultProps`
+ */
+export type NodeContentHandleProps = HandleDefaultProps;
 export type NodeDimensions = {
     width?: number;
     height?: number;
@@ -78,7 +78,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     footerContent?: React.ReactNode;
 }
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+export interface NodeContentProps<CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -125,7 +125,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
+    executionButtons?: (adjustedContentProps: Partial<CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -135,7 +135,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: NodeContentHandleProps[];
+    handles?: HandleDefaultProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -148,7 +148,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<CONTENT_PROPS>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -161,8 +161,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Time in ms used for a short animation of the node to visualize it was added or updated.
      */
     introductionTime?: number | IntroductionTime;
-    /** Additional data stored in the node. */
-    businessData?: NODE_DATA;
+    /**
+     * Additional data stored in the node.
+     * @deprecated (v26) is not used anymore.
+     */
+    businessData?: never;
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
@@ -205,7 +208,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, resizeDirections, resizeMaxDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, resizeDirections, resizeMaxDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<CONTENT_PROPS>): React.JSX.Element;
 export declare const nodeContentUtils: {
     evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[]) => {
         highlightClassNameSuffix: string[];

package/dist/types/extensions/react-flow/nodes/NodeDefault.d.ts

@@ -1,14 +1,18 @@
 import React from "react";
-import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV12Props } from "@xyflow/react";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
+interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionSupportProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
+    data: NodeContentProps<CONTENT_PROPS>;
 }
+type NodeDefaultV9Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & ReactFlowNodeV9Props;
+type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & Omit<ReactFlowNodeV12Props, "data">;
+export type NodeDefaultProps<CONTENT_PROPS = any> = NodeDefaultV9Props<CONTENT_PROPS> | NodeDefaultV12Props<CONTENT_PROPS>;
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.

package/dist/types/extensions/react-flow/nodes/nodeUtils.d.ts

@@ -1,15 +1,22 @@
 import { CSSProperties } from "react";
-import { Node, XYPosition } from "react-flow-renderer";
+import { Node as NodeV9, XYPosition as XYPositionV9 } from "react-flow-renderer";
+import { Node as NodeV12, XYPosition as XYPositionV12 } from "@xyflow/react";
 import { NodeDimensions } from "./NodeContent";
-/** A sticky note for display in the UI as returned from the backend. */
-export interface StickyNote {
+interface StickyNoteBase {
     id: string;
     content: string;
     color: string;
-    position: XYPosition & NodeDimensions;
 }
+interface StickyNotePositionV9 {
+    position: XYPositionV9 & NodeDimensions;
+}
+interface StickyNotePositionV12 {
+    position: XYPositionV12 & NodeDimensions;
+}
+/** A sticky note for display in the UI as returned from the backend. */
+export type StickyNote = (StickyNoteBase & StickyNotePositionV9) | (StickyNoteBase & StickyNotePositionV12);
 export declare const nodeDefaultUtils: {
     generateStyleWithColor: (color: string) => CSSProperties;
-    transformNodeToStickyNode: (node: Node<any>) => StickyNote;
+    transformNodeToStickyNode: (node: NodeV9<any> | NodeV12<any>) => StickyNote;
 };
 export default nodeDefaultUtils;

package/dist/types/extensions/react-flow/versionsupport.d.ts

@@ -1,8 +1,12 @@
+export declare const enum ReactFlowVersions {
+    NONE = "none",// mainly here in case some ReactFlow components are used without any react flow containr
+    V9 = "v9",
+    V12 = "v12"
+}
 export interface ReacFlowVersionSupportProps {
     /**
-     * Spevifies the context of the react flow renderer version that is used for the component.
-     * @deprecated (v25) `legacy` and `next` will be removed/replaced by `v##` values in future versions
+     * Specifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "v12" | "legacy" | "next" | "none";
+    flowVersion?: ReactFlowVersions.V9 | ReactFlowVersions.V12 | ReactFlowVersions.NONE;
 }
-export declare const useReactFlowVersion: () => "none" | "next" | "legacy" | "v12";
+export declare const useReactFlowVersion: () => ReactFlowVersions;

package/dist/types/index.d.ts

@@ -1,7 +1,6 @@
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
-import * as LegacyReplacements from "./legacy-replacements";
 declare const ClassNames: {
     Blueprint: typeof BlueprintClasses;
     Intent: {
@@ -15,4 +14,4 @@ export * from "./common";
 export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
-export { ClassNames, LegacyReplacements };
+export { ClassNames };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.1",
+    "version": "25.0.0-featurecolorwheelinputcmem7327.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,36 +68,37 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.8",
-        "@blueprintjs/core": "^5.18.0",
-        "@blueprintjs/select": "^5.3.19",
-        "@carbon/icons": "^11.58.0",
-        "@carbon/react": "^1.80.1",
-        "@codemirror/lang-javascript": "^6.2.3",
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-markdown": "^6.3.2",
-        "@codemirror/lang-sql": "^6.8.0",
+        "@blueprintjs/colors": "^5.1.11",
+        "@blueprintjs/core": "^5.19.1",
+        "@blueprintjs/select": "^5.3.21",
+        "@carbon/icons": "^11.70.0",
+        "@carbon/react": "^1.96.0",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/lang-sql": "^6.10.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/legacy-modes": "^6.5.0",
+        "@codemirror/legacy-modes": "^6.5.2",
         "@mavrin/remark-typograf": "^2.2.0",
-        "@xyflow/react": "^12.6.0",
+        "@xyflow/react": "^12.9.3",
         "classnames": "^2.5.1",
-        "codemirror": "^6.0.1",
+        "codemirror": "^6.0.2",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "n3": "^1.25.1",
+        "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
-        "react-dom": "^16.13.1",
+        "react-dom": "^16.14.0",
         "react-flow-renderer": "9.7.4",
-        "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
+        "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
-        "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
-        "react-syntax-highlighter": "^15.6.1",
+        "react-syntax-highlighter": "^15.6.6",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
         "remark-definition-list": "^2.0.0",
@@ -106,53 +107,54 @@
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.5"
+        "xml-formatter": "^3.6.7"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/plugin-transform-class-properties": "^7.25.9",
-        "@babel/plugin-transform-private-methods": "^7.25.9",
-        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
-        "@babel/preset-env": "^7.26.9",
-        "@babel/preset-flow": "^7.25.9",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
-        "@eslint/compat": "^1.2.8",
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-private-methods": "^7.27.1",
+        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-flow": "^7.27.1",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@eslint/compat": "^1.4.1",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.24.0",
-        "@storybook/addon-actions": "^8.6.12",
-        "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-jest": "^8.6.12",
-        "@storybook/addon-links": "^8.6.12",
+        "@eslint/js": "^9.39.1",
+        "@storybook/addon-actions": "^8.6.14",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-jest": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.12",
+        "@storybook/cli": "^8.6.14",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.12",
-        "@storybook/react-webpack5": "^8.6.12",
-        "@storybook/test": "^8.6.12",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@storybook/react": "^8.6.14",
+        "@storybook/react-webpack5": "^8.6.14",
+        "@storybook/test": "^8.6.14",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^12.1.5",
-        "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
-        "@types/jest": "^29.5.14",
+        "@types/he": "^1.2.3",
+        "@types/jest": "^30.0.0",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.16",
-        "@types/n3": "^1.24.2",
+        "@types/lodash": "^4.17.21",
+        "@types/n3": "^1.26.1",
+        "@types/react-is": "^19.2.0",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.30.1",
-        "@typescript-eslint/parser": "^8.30.1",
-        "babel-jest": "^29.7.0",
-        "chromatic": "^11.28.0",
-        "eslint": "^9.24.0",
+        "@typescript-eslint/eslint-plugin": "^8.47.0",
+        "@typescript-eslint/parser": "^8.47.0",
+        "babel-jest": "^30.2.0",
+        "chromatic": "^13.3.4",
+        "eslint": "^9.39.1",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.5.1",
+        "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -162,7 +164,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.6.12",
+        "storybook": "^8.6.14",
         "stylelint": "^16.18.0",
         "stylelint-config-recess-order": "^6.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
@@ -174,12 +176,11 @@
     },
     "peerDependencies": {
         "@blueprintjs/core": ">=5",
-        "react": ">=16",
-        "react-dom": ">=16"
+        "react": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "**/@types/react": "^17.0.90",
+        "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
         "hast-util-from-parse5": "8.0.0"

package/src/_shame.scss

@@ -51,6 +51,6 @@ textarea:focus-visible {
 }
 
 :focus-visible {
-    outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
     outline-offset: 1px;
 }