@ssa-ui-kit/core 3.4.0 → 3.6.0

package/dist/index.js

@@ -7980,6 +7980,7 @@ __webpack_require__.d(__webpack_exports__, {
   CollapsibleNavBarItemProvider: () => (/* reexport */ CollapsibleNavBarItemProvider),
   CollapsibleNavBarProvider: () => (/* reexport */ CollapsibleNavBarProvider),
   ColorPicker: () => (/* reexport */ ColorPicker),
+  Counter: () => (/* reexport */ Counter),
   DEFAULT_EUROPEAN_MASK_FORMAT: () => (/* reexport */ DEFAULT_EUROPEAN_MASK_FORMAT),
   DEFAULT_MASK_FORMAT: () => (/* reexport */ constants_DEFAULT_MASK_FORMAT),
   DEFAULT_MONTH_MASK_FORMAT: () => (/* reexport */ constants_DEFAULT_MONTH_MASK_FORMAT),
@@ -15239,7 +15240,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   status = 'basic'
 }) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
   theme
 }) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
@@ -15247,7 +15248,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   theme
 }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";&::placeholder{color:", ({
+}) => theme.colors.greyLighter, ";resize:none;&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){box-shadow:", ({
   theme,
@@ -15357,7 +15358,8 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
   onPaste,
   register,
   setCountChar,
-  status = 'basic'
+  status = 'basic',
+  ...rest
 }, ref) {
   (0,external_react_namespaceObject.useEffect)(() => {
     if (!register) {
@@ -15376,6 +15378,7 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
     onPaste: onPaste,
     title: title,
     status: status,
+    ...rest,
     ...registerResult,
     onChange: (0,utils_namespaceObject.callAll)(setCountChar, onChange),
     ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([registerResult?.ref, ref])
@@ -28538,6 +28541,154 @@ const CardList = ({
 ;// ./src/components/CardList/index.ts
 
 
+;// ./src/components/Counter/types.ts
+let CounterVariants = /*#__PURE__*/function (CounterVariants) {
+  CounterVariants["primary"] = "primary";
+  CounterVariants["secondary"] = "secondary";
+  CounterVariants["error"] = "error";
+  CounterVariants["warning"] = "warning";
+  CounterVariants["success"] = "success";
+  return CounterVariants;
+}({});
+
+/**
+ * Extends `MainSizes` with a `dot` slot used internally when `count` is
+ * undefined — renders a small dot with no label as a presence indicator.
+ */
+;// ./src/components/Counter/styles.tsx
+
+function Counter_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+/** Resolves a variant key to its `theme.palette` background + white text. */
+const makeVariantStyle = (theme, key) => /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.white, ";background:", theme.palette[key].main, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_variantStyles = {
+  primary: theme => makeVariantStyle(theme, CounterVariants.primary),
+  secondary: theme => makeVariantStyle(theme, CounterVariants.secondary),
+  error: theme => makeVariantStyle(theme, CounterVariants.error),
+  warning: theme => makeVariantStyle(theme, CounterVariants.warning),
+  success: theme => makeVariantStyle(theme, CounterVariants.success)
+};
+const styles_sizeStyles = {
+  dot:  true ? {
+    name: "9e7m57",
+    styles: "width:8px;height:8px"
+  } : 0,
+  small:  true ? {
+    name: "14h28tx",
+    styles: "height:24px;font-size:12px;padding:4px 9px"
+  } : 0,
+  medium:  true ? {
+    name: "fy8gxb",
+    styles: "padding:4px 13px;height:32px;font-size:14px"
+  } : 0,
+  large:  true ? {
+    name: "irp62o",
+    styles: "font-size:16px;height:44px;padding:4px 19px"
+  } : 0
+};
+
+/**
+ * Builds a background override from a `color` string.
+ * If `color` matches a key in `theme.colors` the design token is used;
+ * otherwise the value is passed through as a raw CSS color string.
+ */
+const makeColorOverride = (theme, color) => /*#__PURE__*/(0,react_namespaceObject.css)("background:", color in theme.colors ? theme.colors[color] : color, ";" + ( true ? "" : 0),  true ? "" : 0);
+const CounterBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eg7ht9z0"
+} : 0)( true ? {
+  name: "1tmyl78",
+  styles: "display:flex;align-items:center;justify-content:center;border:none;font:inherit;border-radius:50px;font-family:Manrope,sans-serif;width:min-content;font-style:normal;font-weight:700"
+} : 0);
+;// ./src/components/Counter/Counter.tsx
+
+
+
+
+const MAX_COUNT = 99;
+
+/**
+ * Counter - Compact numeric indicator for displaying counts or notification badges.
+ *
+ * ### Sizing
+ * Accepts `'small' | 'medium' | 'large'` via the `size` prop (default `'medium'`).
+ * When `count` is omitted the counter shrinks to a small dot (`dot` size) — useful
+ * as a presence indicator with no number shown.
+ *
+ * ### Color
+ * Background is driven by `theme.palette[variant].main` for the five semantic variants.
+ * Pass `color` to override: a `theme.colors` key resolves to the design token value,
+ * any other string is used as a raw CSS color.
+ *
+ * ### CSS override
+ * Pass `css` to apply one-off Emotion styles on top of all internal styles
+ * (size → variant → color → css). Useful for margins, positioning, or shape tweaks.
+ *
+ * ### Overflow
+ * Values above 99 are automatically clamped to `"99+"`.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage — primary variant, medium size
+ * <Counter count={5} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Overflow label
+ * <Counter count={120} variant={CounterVariants.error} size="large" />
+ * // renders "99+"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Raw hex color override
+ * <Counter count={3} color="#F7931A" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // theme.colors key as color
+ * <Counter count={7} color="purple" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Empty dot indicator (no count)
+ * <Counter variant={CounterVariants.error} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // CSS override for layout / shape
+ * <Counter count={3} css={{ marginLeft: 8, borderRadius: 4 }} />
+ * ```
+ */
+const Counter = ({
+  count,
+  variant = CounterVariants.primary,
+  size = 'medium',
+  color,
+  className,
+  css,
+  ref
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const isEmpty = count === undefined;
+  const label = !isEmpty && count > MAX_COUNT ? `${MAX_COUNT}+` : count;
+  const appliedVariantStyle = styles_variantStyles[variant](theme);
+  const appliedSizeStyle = styles_sizeStyles[!isEmpty ? size : 'dot'];
+  const colorOverride = color ? makeColorOverride(theme, color) : undefined;
+  return (0,jsx_runtime_namespaceObject.jsx)(CounterBase, {
+    ref: ref,
+    css: [appliedSizeStyle, appliedVariantStyle, colorOverride, css,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: label
+  });
+};
+/* harmony default export */ const Counter_Counter = ((/* unused pure expression or super */ null && (Counter)));
+;// ./src/components/Counter/index.ts
+
 ;// ./src/components/Tag/styles.ts
 
 
@@ -40385,21 +40536,6 @@ const BarLineComplexChartTooltip = /*#__PURE__*/(0,external_react_namespaceObjec
 });
 ;// ./src/components/Charts/BarLineComplexChart/constants.ts
 const FONT_FAMILY = 'Manrope, sans-serif';
-const TITLE_PADDING_LEFT = {
-  mobile: 10,
-  md: 10,
-  other: 20
-};
-const TITLE_PADDING_TOP = {
-  mobile: 13,
-  md: 18,
-  other: 20
-};
-const TITLE_FONT_SIZE = {
-  mobile: 16,
-  md: 16,
-  other: 20
-};
 ;// ./src/components/Charts/hooks/usePlotlyDefaultConfig.ts
 
 const usePlotlyDefaultConfig = () => {
@@ -40444,6 +40580,7 @@ function BarLineComplexChartView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You
 
 
 
+
 var BarLineComplexChartView_ref =  true ? {
   name: "sj7adp",
   styles: "background:#fff;border-radius:8px;box-shadow:-2px 2px 8px 0px rgba(43, 45, 49, 0.24);padding:4px 8px"
@@ -40462,7 +40599,6 @@ const BarLineComplexChartView = ({
   const theme = (0,react_namespaceObject.useTheme)();
   const plotlyWrapperRef = (0,external_react_namespaceObject.useRef)(null);
   const plotlyDefaultLayoutConfig = usePlotlyDefaultConfig();
-  const deviceType = (0,hooks_namespaceObject.useDeviceType)();
   const {
     data
   } = useBarLineComplexChartContext();
@@ -40477,6 +40613,9 @@ const BarLineComplexChartView = ({
   const {
     setIsOpen
   } = useTooltipContext();
+  const {
+    features
+  } = useBarLineComplexChartContext();
   const {
     layout = {},
     config = {},
@@ -40484,8 +40623,6 @@ const BarLineComplexChartView = ({
   } = props;
   const {
     margin = {},
-    title = {},
-    titlefont = {},
     yaxis = {},
     yaxis2 = {},
     xaxis = {},
@@ -40498,9 +40635,6 @@ const BarLineComplexChartView = ({
     size: isFullscreenMode ? 16 : 12,
     weight: 500
   };
-  if (typeof props.cardProps?.title === 'string' && typeof title !== 'string' && typeof title.text !== 'string') {
-    title.text = props.cardProps.title;
-  }
   const formattedTicks = timestamps.map((timestamp, index) => {
     const dateTime = new Date(timestamp);
     const monthYear = dateTime.toLocaleDateString('en-US', {
@@ -40570,11 +40704,15 @@ const BarLineComplexChartView = ({
       window.removeEventListener('resize', handleDebouncedFn, false);
     };
   }, []);
+  // title is rendered as an absolutely positioned overlay so it shares the same
+  // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+  // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+  // The Wrapper is kept `position: relative` so the overlay coordinates are relative to the chart.
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
     className: "bar-line-complex-chart-wrapper",
     ref: plotlyWrapperRef,
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      position: isFullscreenMode ? 'fixed' : 'static',
+      position: isFullscreenMode ? 'fixed' : 'relative',
       top: isFullscreenMode ? '2.5%' : 'unset',
       left: isFullscreenMode ? '2.5%' : 'unset',
       width: isFullscreenMode ? '95%' : width,
@@ -40582,6 +40720,7 @@ const BarLineComplexChartView = ({
       borderRadius: 20,
       zIndex: isFullscreenMode ? 2 : 1,
       overflow: 'hidden',
+      background: theme.colors.white,
       boxShadow: 'rgba(42, 48, 57, 0.08) 0px 10px 40px 0px',
       '& .plotly': {
         '& > div': isFullscreenMode && {
@@ -40595,7 +40734,28 @@ const BarLineComplexChartView = ({
         }
       }
     },  true ? "" : 0,  true ? "" : 0),
-    children: [(0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+    children: [features?.includes('header') && props.cardProps?.title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        position: 'absolute',
+        top: isFullscreenMode ? '13px' : '10px',
+        left: '10px',
+        width: 'auto',
+        marginBottom: 0,
+        zIndex: 1
+      },  true ? "" : 0,  true ? "" : 0),
+      children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+        variant: "h3",
+        weight: "bold",
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          flexDirection: 'row',
+          fontSize: isFullscreenMode ? '24px' : '12px',
+          [theme.mediaQueries.md]: {
+            fontSize: isFullscreenMode ? '24px' : '16px'
+          }
+        },  true ? "" : 0,  true ? "" : 0),
+        children: props.cardProps.title
+      })
+    }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
       divId: 'bar-line-complex-chart-graph',
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         width: isFullscreenMode ? '100%' : width,
@@ -40615,27 +40775,12 @@ const BarLineComplexChartView = ({
         orientation: 1,
         margin: {
           b: isFullscreenMode ? 15 : 0,
-          l: orientation === 'v' ? (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT) : isFullscreenMode ? 30 : 15,
+          l: orientation === 'v' ? 10 : isFullscreenMode ? 30 : 15,
           r: orientation === 'v' ? 40 : 0,
-          t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP) + 25,
+          t: features?.includes('header') && props.cardProps?.title ? isFullscreenMode ? 45 : 43 : 10,
           pad: 10,
           ...margin
         },
-        title: typeof title === 'string' ? title : {
-          x: 0,
-          y: 1,
-          font: {
-            size: isFullscreenMode ? 24 : (0,utils_namespaceObject.propOr)(TITLE_FONT_SIZE.other, deviceType)(TITLE_FONT_SIZE),
-            weight: 700,
-            family: FONT_FAMILY,
-            ...titlefont
-          },
-          pad: {
-            l: (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT),
-            t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP)
-          },
-          ...title
-        },
         barmode: 'group',
         autosize: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -40785,6 +40930,8 @@ const BarLineComplexChartComponent = ({
   onFullscreenModeChange,
   ...rest
 }) => {
+  const effectiveTitle = cardProps?.title ?? title;
+  const effectiveFeatures = effectiveTitle && !features.includes('header') ? [...features, 'header'] : features;
   const tooltip = useTooltip();
   const {
     isFullscreenMode,
@@ -40807,14 +40954,14 @@ const BarLineComplexChartComponent = ({
     lineShape: lineShape,
     maxVisibleBars: maxVisibleBars,
     maxVisibleLines: maxVisibleLines,
-    features: features,
+    features: effectiveFeatures,
     children: (0,jsx_runtime_namespaceObject.jsx)(TooltipContext.Provider, {
       value: tooltip,
       children: (0,jsx_runtime_namespaceObject.jsx)(BarLineComplexChartInternal, {
         ...rest,
         cardProps: {
           ...cardProps,
-          title: cardProps?.title || title
+          title: effectiveTitle
         }
       })
     })
@@ -47802,6 +47949,7 @@ const getCandlestickPlotData = (style, data, increasingColor, decreasingColor) =
   }];
 };
 ;// ./src/components/Charts/CandlestickChart/CandlestickChart.tsx
+
 function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -47812,14 +47960,23 @@ function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+
 var CandlestickChart_ref =  true ? {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%"
+} : 0;
+var CandlestickChart_ref2 =  true ? {
+  name: "1j8nx2m",
+  styles: "position:absolute;top:1px;left:10px;width:auto;margin-bottom:0;z-index:1"
+} : 0;
+var CandlestickChart_ref3 =  true ? {
   name: "w1atjl",
   styles: "width:100%;height:100%"
 } : 0;
 const CandlestickChartComponent = ({
   title,
   data,
-  features,
+  features = [],
   widgetCardProps,
   style = 'hollow',
   ...plotParams
@@ -47851,57 +48008,66 @@ const CandlestickChartComponent = ({
       gravity: '1'
     });
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
-    features: features,
-    cardProps: {
-      ...widgetCardProps
-    },
-    children: (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
-      layout: {
-        ...plotlyDefaultLayoutConfig.layout,
-        title: {
-          text: title,
-          x: 0,
-          y: 1,
-          pad: {
-            l: 10,
-            t: 5
-          },
-          font: {
-            size: 24,
-            weight: 700,
-            family: 'Manrope, sans-serif'
-          }
-        },
-        dragmode: 'zoom',
-        xaxis: {
-          rangeslider: {
-            visible: false
-          }
-        },
-        yaxis: {
-          side: 'right'
-        },
-        margin: {
-          t: 20,
-          b: 40,
-          l: 20,
-          r: 20
-        },
-        showlegend: false,
-        ...layout
-      },
-      css: CandlestickChart_ref,
-      useResizeHandler: true,
-      data: plotData,
-      config: {
-        ...plotlyDefaultLayoutConfig.config,
-        modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
-        ...config
+  return (
+    // title is rendered as an absolutely positioned overlay so it shares the same
+    // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+    // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+    (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+      features: features,
+      cardProps: {
+        ...widgetCardProps
       },
-      ...restPlotParams
+      children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: CandlestickChart_ref,
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+          css: CandlestickChart_ref2,
+          children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+            variant: "h3",
+            weight: "bold",
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              flexDirection: 'row',
+              lineHeight: 1,
+              fontSize: '24px',
+              [theme.mediaQueries.md]: {
+                fontSize: '24px'
+              }
+            },  true ? "" : 0,  true ? "" : 0),
+            children: title
+          })
+        }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+          layout: {
+            ...plotlyDefaultLayoutConfig.layout,
+            dragmode: 'zoom',
+            xaxis: {
+              rangeslider: {
+                visible: false
+              }
+            },
+            yaxis: {
+              side: 'right'
+            },
+            margin: {
+              t: 20,
+              b: 40,
+              l: 20,
+              r: 20
+            },
+            showlegend: false,
+            ...layout
+          },
+          css: CandlestickChart_ref3,
+          useResizeHandler: true,
+          data: plotData,
+          config: {
+            ...plotlyDefaultLayoutConfig.config,
+            modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
+            ...config
+          },
+          ...restPlotParams
+        })]
+      })
     })
-  });
+  );
 };
 const CandlestickChart = WithFullscreenMode(CandlestickChartComponent);
 ;// ./src/components/Charts/CandlestickChart/index.ts
@@ -51231,7 +51397,7 @@ const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
   name: "1j5vobt",
   styles: "display:flex;align-items:center;gap:4px"
 } : 0);
-const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
+const styles_Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
   target: "ej2kihb16"
 } : 0),  true ? {
   target: "ej2kihb7"
@@ -51490,7 +51656,7 @@ const PersonInfoCounter = ({
       children: user.name
     }, user.id))
   });
-  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(Counter, {
+  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(styles_Counter, {
     css: css,
     "data-testid": "person-info-counter",
     children: counterValue
@@ -51939,6 +52105,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================