@ssa-ui-kit/core 3.6.0 → 3.7.0

package/dist/components/History/History.d.ts

@@ -9,7 +9,8 @@ import { HistoryProps } from './types';
  * - `item.color` overrides the marker color for a specific row
  * - `defaultColor` is used when `item.color` is not provided
  * - fallback default marker color: `theme.palette.primary.main`
- * - fallback connector color: `theme.colors.greyLighter`
+ * - fallback connector color: `theme.colors.greyFocused`
+ * - `lineWidth` controls the connector line thickness in pixels (default `2`)
  *
  * ### Alignment behavior
  * The marker is vertically aligned to the first text line and adapts when
@@ -28,4 +29,4 @@ import { HistoryProps } from './types';
  * />
  * ```
  */
-export declare const History: ({ items, defaultColor, lineColor, dateWidth, circleSize, sx, }: HistoryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const History: ({ items, defaultColor, lineColor, lineWidth, dateWidth, circleSize, sx, }: HistoryProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/History/styles.d.ts

@@ -4,6 +4,6 @@ export declare const container: import("@emotion/react").SerializedStyles;
 export declare const row: import("@emotion/react").SerializedStyles;
 export declare const leftColumn: (width: number) => import("@emotion/react").SerializedStyles;
 export declare const circle: (color: string, size: number, topOffset: number) => import("@emotion/react").SerializedStyles;
-export declare const connector: (color: string, circleTopOffset: number, circleSize: number) => import("@emotion/react").SerializedStyles;
+export declare const connector: (color: string, circleTopOffset: number, circleSize: number, lineWidth: number) => import("@emotion/react").SerializedStyles;
 export declare const dateColumn: (width: number) => import("@emotion/react").SerializedStyles;
 export declare const contentColumn: import("@emotion/react").SerializedStyles;

package/dist/components/History/types.d.ts

@@ -36,9 +36,14 @@ export interface HistoryProps {
     defaultColor?: string;
     /**
      * Connector line color between markers.
-     * Falls back to `theme.colors.greyLighter`.
+     * Falls back to `theme.colors.greyFocused`.
      */
     lineColor?: string;
+    /**
+     * Connector line width in pixels.
+     * @default 2
+     */
+    lineWidth?: number;
     /**
      * Width of the date column in pixels.
      * @default 120

package/dist/index.js

@@ -49485,7 +49485,7 @@ const row =  true ? {
 } : 0;
 const leftColumn = width => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;flex-shrink:0;width:", width, "px;" + ( true ? "" : 0),  true ? "" : 0);
 const circle = (color, size, topOffset) => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;top:", topOffset, "px;left:50%;transform:translateX(-50%);width:", size, "px;height:", size, "px;border-radius:50%;background-color:", color, ";z-index:1;" + ( true ? "" : 0),  true ? "" : 0);
-const connector = (color, circleTopOffset, circleSize) => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;left:50%;transform:translateX(-50%);top:", circleTopOffset + circleSize / 2, "px;bottom:-", circleTopOffset + circleSize / 2, "px;width:1px;background-color:", color, ";" + ( true ? "" : 0),  true ? "" : 0);
+const connector = (color, circleTopOffset, circleSize, lineWidth) => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;left:50%;transform:translateX(-50%);top:", circleTopOffset + circleSize / 2, "px;bottom:-", circleTopOffset + circleSize / 2, "px;width:", lineWidth, "px;background-color:", color, ";" + ( true ? "" : 0),  true ? "" : 0);
 const dateColumn = width => /*#__PURE__*/(0,react_namespaceObject.css)("width:", width, "px;flex-shrink:0;padding-top:", FIRST_LINE_TOP_PADDING, "px;padding-bottom:20px;font-size:14px;line-height:", FIRST_LINE_HEIGHT, "px;" + ( true ? "" : 0),  true ? "" : 0);
 const contentColumn = /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;padding-top:", FIRST_LINE_TOP_PADDING, "px;padding-bottom:20px;" + ( true ? "" : 0),  true ? "" : 0);
 ;// ./src/components/History/History.tsx
@@ -49494,6 +49494,7 @@ const contentColumn = /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;padding
 
 const DEFAULT_CIRCLE_SIZE = 12;
 const DEFAULT_DATE_WIDTH = 120;
+const DEFAULT_LINE_WIDTH = 2;
 const LEFT_COLUMN_MARGIN_RIGHT = 16;
 
 /**
@@ -49506,7 +49507,8 @@ const LEFT_COLUMN_MARGIN_RIGHT = 16;
  * - `item.color` overrides the marker color for a specific row
  * - `defaultColor` is used when `item.color` is not provided
  * - fallback default marker color: `theme.palette.primary.main`
- * - fallback connector color: `theme.colors.greyLighter`
+ * - fallback connector color: `theme.colors.greyFocused`
+ * - `lineWidth` controls the connector line thickness in pixels (default `2`)
  *
  * ### Alignment behavior
  * The marker is vertically aligned to the first text line and adapts when
@@ -49529,13 +49531,14 @@ const History = ({
   items,
   defaultColor,
   lineColor,
+  lineWidth = DEFAULT_LINE_WIDTH,
   dateWidth = DEFAULT_DATE_WIDTH,
   circleSize = DEFAULT_CIRCLE_SIZE,
   sx
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const resolvedDefaultColor = defaultColor ?? theme.palette.primary.main;
-  const resolvedLineColor = lineColor ?? theme.colors.greyLighter;
+  const resolvedLineColor = lineColor ?? theme.colors.greyFocused;
   const circleTopOffset = Math.max(0, FIRST_LINE_TOP_PADDING + (FIRST_LINE_HEIGHT - circleSize) / 2);
   return (0,jsx_runtime_namespaceObject.jsx)("div", {
     "data-testid": "history",
@@ -49554,7 +49557,7 @@ const History = ({
           children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
             css: circle(color, circleSize, circleTopOffset)
           }), !isLast && (0,jsx_runtime_namespaceObject.jsx)("div", {
-            css: connector(resolvedLineColor, circleTopOffset, circleSize)
+            css: connector(resolvedLineColor, circleTopOffset, circleSize, lineWidth)
           })]
         }), (0,jsx_runtime_namespaceObject.jsx)("div", {
           css: dateColumn(dateWidth),