design-zystem 1.0.277 → 1.0.279

package/dist/index.css

@@ -277,161 +277,3 @@
   color: #646b73;
   border-color: #cbd5e1;
 }
-
-/* src/Components/Gantt/Gantt.css */
-.dz-gantt {
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  background: #fff;
-  color: #343a40;
-  width: 100%;
-}
-.dz-gantt__axis {
-  display: grid;
-  grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);
-  border-bottom: 1px solid #e2e8f0;
-  background: #f8fafc;
-}
-.dz-gantt__axis-label {
-  display: flex;
-  align-items: center;
-  height: 30px;
-  padding: 0 12px;
-  border-right: 1px solid #e2e8f0;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  color: #94a3b8;
-}
-.dz-gantt__axis-days {
-  position: relative;
-  height: 30px;
-}
-.dz-gantt__axis-day {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-left: 8px;
-  border-right: 1px solid #f1f5f9;
-  box-sizing: border-box;
-  font-size: 10px;
-  font-weight: 600;
-  color: #94a3b8;
-  white-space: nowrap;
-}
-.dz-gantt__body {
-  display: grid;
-  grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);
-  max-height: var(--dz-gantt-max-h);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.dz-gantt__labels {
-  min-width: 0;
-  border-right: 1px solid #e2e8f0;
-}
-.dz-gantt__dot {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-.dz-gantt__labelrow {
-  height: var(--dz-gantt-row-h);
-  padding: 0 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  min-width: 0;
-  overflow: hidden;
-  box-sizing: border-box;
-  transition: background 0.12s ease;
-}
-.dz-gantt__labelrow--alt {
-  background: #f8fafc;
-}
-.dz-gantt__labelrow--clickable {
-  cursor: pointer;
-}
-.dz-gantt__labelrow--clickable:hover {
-  background: #f1f5f9;
-}
-.dz-gantt__timeline-col {
-  min-width: 0;
-  overflow: hidden;
-}
-.dz-gantt__timeline {
-  position: relative;
-  width: 100%;
-}
-.dz-gantt__day {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: #fff;
-  border-right: 1px solid #f1f5f9;
-  box-sizing: border-box;
-}
-.dz-gantt__day--alt {
-  background: #f8fafc;
-}
-.dz-gantt__band {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: rgba(244, 70, 73, 0.1);
-  border-left: 1.5px solid #f44649;
-  border-right: 1.5px solid #f44649;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-.dz-gantt__track {
-  position: absolute;
-  left: 0;
-  right: 0;
-  box-sizing: border-box;
-}
-.dz-gantt__track:not(:first-child) {
-  border-top: 1px solid #f1f5f9;
-}
-.dz-gantt__bar {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 22px;
-  min-width: 8px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: var(--dz-gantt-bar-color, #94a3b8);
-  border: 1.5px solid var(--dz-gantt-bar-color, #94a3b8);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
-}
-.dz-gantt__bar--approx {
-  border-style: dashed;
-  opacity: 0.9;
-}
-.dz-gantt__bar-label {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--dz-gantt-bar-text, #fff);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.dz-gantt__swatch {
-  display: inline-block;
-  width: 18px;
-  height: 12px;
-  border-radius: 3px;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}

package/dist/index.js

@@ -6181,7 +6181,170 @@ var Timeline = ({
 };
 
 // src/Components/Gantt/Gantt.tsx
+var import_styled_components52 = __toESM(require("styled-components"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
+var Root = import_styled_components52.default.div`
+  --dz-gantt-label-w: ${(p) => p.$labelWidth}px;
+  --dz-gantt-max-h: ${(p) => p.$maxHeight}px;
+  border: 1px solid ${colors.grey_300};
+  border-radius: 10px;
+  overflow: hidden;
+  background: ${colors.white};
+  color: ${colors.dark};
+  width: 100%;
+`;
+var gridColumns = `grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);`;
+var Axis = import_styled_components52.default.div`
+  display: grid;
+  ${gridColumns}
+  border-bottom: 1px solid ${colors.grey_300};
+  background: ${colors.grey_100};
+`;
+var AxisLabel = import_styled_components52.default.div`
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 12px;
+  border-right: 1px solid ${colors.grey_300};
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: ${colors.grey_500};
+`;
+var AxisDays = import_styled_components52.default.div`
+  position: relative;
+  height: 30px;
+`;
+var AxisDay = import_styled_components52.default.div`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  border-right: 1px solid ${colors.grey_200};
+  box-sizing: border-box;
+  font-size: 10px;
+  font-weight: 600;
+  color: ${colors.grey_500};
+  white-space: nowrap;
+`;
+var Body = import_styled_components52.default.div`
+  display: grid;
+  ${gridColumns}
+  max-height: var(--dz-gantt-max-h);
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+var Labels = import_styled_components52.default.div`
+  min-width: 0;
+  border-right: 1px solid ${colors.grey_300};
+`;
+var LabelRow = import_styled_components52.default.div`
+  height: ${(p) => p.$rowHeight}px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: background 0.12s ease;
+  background: ${(p) => p.$alt ? colors.grey_100 : "transparent"};
+  cursor: ${(p) => p.$clickable ? "pointer" : "default"};
+
+  &:hover {
+    background: ${(p) => p.$clickable ? colors.grey_200 : void 0};
+  }
+`;
+var TimelineCol = import_styled_components52.default.div`
+  min-width: 0;
+  overflow: hidden;
+`;
+var Timeline2 = import_styled_components52.default.div`
+  position: relative;
+  width: 100%;
+  height: ${(p) => p.$height}px;
+`;
+var Day = import_styled_components52.default.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  background: ${(p) => p.$alt ? colors.grey_100 : colors.white};
+  border-right: 1px solid ${colors.grey_200};
+  box-sizing: border-box;
+`;
+var Band = import_styled_components52.default.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  background: ${colors.red_50};
+  border-left: 1.5px solid ${colors.red};
+  border-right: 1.5px solid ${colors.red};
+  box-sizing: border-box;
+  pointer-events: none;
+`;
+var Track3 = import_styled_components52.default.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: ${(p) => p.$top}px;
+  height: ${(p) => p.$rowHeight}px;
+  box-sizing: border-box;
+  border-top: ${(p) => p.$first ? "none" : `1px solid ${colors.grey_200}`};
+`;
+var Bar = import_styled_components52.default.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  height: 22px;
+  min-width: 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: ${(p) => p.$color};
+  border: 1.5px ${(p) => p.$dashed ? "dashed" : "solid"} ${(p) => p.$color};
+  opacity: ${(p) => p.$dashed ? 0.9 : 1};
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+`;
+var BarLabel = import_styled_components52.default.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: ${(p) => p.$textColor};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var Dot3 = import_styled_components52.default.span`
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  background: ${(p) => p.$color};
+`;
+var Swatch2 = import_styled_components52.default.span`
+  display: inline-block;
+  width: 18px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: ${(p) => p.$filled ? p.$color : "transparent"};
+  border: 1.5px solid ${(p) => p.$color};
+`;
 var Gantt = ({
   days,
   rows,
@@ -6195,105 +6358,82 @@ var Gantt = ({
 }) => {
   const bodyHeight = rows.length * rowHeight;
   const clickable = Boolean(onRowClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-    "div",
-    {
-      className: "dz-gantt",
-      style: {
-        ["--dz-gantt-label-w"]: `${labelWidth}px`,
-        ["--dz-gantt-row-h"]: `${rowHeight}px`,
-        ["--dz-gantt-max-h"]: `${maxHeight}px`
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__axis", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__axis-label", children: labelHeader }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__axis-days", children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "div",
-            {
-              className: "dz-gantt__axis-day",
-              style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` },
-              children: day.label
-            },
-            day.key
-          )) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__labels", children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root, { $labelWidth: labelWidth, $maxHeight: maxHeight, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Axis, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AxisLabel, { children: labelHeader }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AxisDays, { children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        AxisDay,
+        {
+          $leftPct: day.leftPct,
+          $widthPct: day.widthPct,
+          children: day.label
+        },
+        day.key
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Body, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Labels, { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        LabelRow,
+        {
+          $rowHeight: rowHeight,
+          $alt: i % 2 === 1,
+          $clickable: clickable,
+          onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+          children: renderLabel(row, i)
+        },
+        row.key
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TimelineCol, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Timeline2, { $height: bodyHeight, children: [
+        days.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          Day,
+          {
+            $leftPct: day.leftPct,
+            $widthPct: day.widthPct,
+            $alt: i % 2 === 1
+          },
+          day.key
+        )),
+        bands.map((band) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          Band,
+          {
+            title: band.title,
+            $leftPct: band.leftPct,
+            $widthPct: band.widthPct
+          },
+          band.key
+        )),
+        rows.map((row, i) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            Track3,
             {
-              className: [
-                "dz-gantt__labelrow",
-                i % 2 === 1 ? "dz-gantt__labelrow--alt" : "",
-                clickable ? "dz-gantt__labelrow--clickable" : ""
-              ].filter(Boolean).join(" "),
-              onClick: onRowClick ? () => onRowClick(row, i) : void 0,
-              children: renderLabel(row, i)
+              $top: i * rowHeight,
+              $rowHeight: rowHeight,
+              $first: i === 0,
+              children: row.bar && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                Bar,
+                {
+                  title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
+                  $leftPct: row.bar.leftPct,
+                  $widthPct: row.bar.widthPct,
+                  $color: row.bar.color,
+                  $dashed: Boolean(row.bar.dashed),
+                  children: row.bar.label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BarLabel, { $textColor: (_c = row.bar.textColor) != null ? _c : colors.white, children: row.bar.label })
+                }
+              )
             },
             row.key
-          )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "dz-gantt__timeline-col", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "dz-gantt__timeline", style: { height: bodyHeight }, children: [
-            days.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-              "div",
-              {
-                className: `dz-gantt__day ${i % 2 === 1 ? "dz-gantt__day--alt" : ""}`,
-                style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` }
-              },
-              day.key
-            )),
-            bands.map((band) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-              "div",
-              {
-                className: "dz-gantt__band",
-                title: band.title,
-                style: { left: `${band.leftPct}%`, width: `${band.widthPct}%` }
-              },
-              band.key
-            )),
-            rows.map((row, i) => {
-              var _a, _b, _c;
-              return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "div",
-                {
-                  className: "dz-gantt__track",
-                  style: { top: i * rowHeight, height: rowHeight },
-                  children: row.bar && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                    "div",
-                    {
-                      className: `dz-gantt__bar ${row.bar.dashed ? "dz-gantt__bar--approx" : ""}`,
-                      title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
-                      style: {
-                        left: `${row.bar.leftPct}%`,
-                        width: `${row.bar.widthPct}%`,
-                        ["--dz-gantt-bar-color"]: row.bar.color,
-                        ["--dz-gantt-bar-text"]: (_c = row.bar.textColor) != null ? _c : "#fff"
-                      },
-                      children: row.bar.label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "dz-gantt__bar-label", children: row.bar.label })
-                    }
-                  )
-                },
-                row.key
-              );
-            })
-          ] }) })
-        ] })
-      ]
-    }
-  );
+          );
+        })
+      ] }) })
+    ] })
+  ] });
 };
-var GanttDot = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "dz-gantt__dot", style: { background: color } });
+var GanttDot = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Dot3, { $color: color });
 var GanttSwatch = ({
   color,
   filled = true
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-  "span",
-  {
-    className: "dz-gantt__swatch",
-    style: {
-      background: filled ? color : "transparent",
-      border: `1.5px solid ${color}`
-    }
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Swatch2, { $color: color, $filled: filled });
 
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {

package/dist/index.mjs

@@ -6062,7 +6062,170 @@ var Timeline = ({
 };
 
 // src/Components/Gantt/Gantt.tsx
+import styled52 from "styled-components";
 import { jsx as jsx63, jsxs as jsxs36 } from "react/jsx-runtime";
+var Root = styled52.div`
+  --dz-gantt-label-w: ${(p) => p.$labelWidth}px;
+  --dz-gantt-max-h: ${(p) => p.$maxHeight}px;
+  border: 1px solid ${colors.grey_300};
+  border-radius: 10px;
+  overflow: hidden;
+  background: ${colors.white};
+  color: ${colors.dark};
+  width: 100%;
+`;
+var gridColumns = `grid-template-columns: var(--dz-gantt-label-w) minmax(0, 1fr);`;
+var Axis = styled52.div`
+  display: grid;
+  ${gridColumns}
+  border-bottom: 1px solid ${colors.grey_300};
+  background: ${colors.grey_100};
+`;
+var AxisLabel = styled52.div`
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 12px;
+  border-right: 1px solid ${colors.grey_300};
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: ${colors.grey_500};
+`;
+var AxisDays = styled52.div`
+  position: relative;
+  height: 30px;
+`;
+var AxisDay = styled52.div`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  border-right: 1px solid ${colors.grey_200};
+  box-sizing: border-box;
+  font-size: 10px;
+  font-weight: 600;
+  color: ${colors.grey_500};
+  white-space: nowrap;
+`;
+var Body = styled52.div`
+  display: grid;
+  ${gridColumns}
+  max-height: var(--dz-gantt-max-h);
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+var Labels = styled52.div`
+  min-width: 0;
+  border-right: 1px solid ${colors.grey_300};
+`;
+var LabelRow = styled52.div`
+  height: ${(p) => p.$rowHeight}px;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: background 0.12s ease;
+  background: ${(p) => p.$alt ? colors.grey_100 : "transparent"};
+  cursor: ${(p) => p.$clickable ? "pointer" : "default"};
+
+  &:hover {
+    background: ${(p) => p.$clickable ? colors.grey_200 : void 0};
+  }
+`;
+var TimelineCol = styled52.div`
+  min-width: 0;
+  overflow: hidden;
+`;
+var Timeline2 = styled52.div`
+  position: relative;
+  width: 100%;
+  height: ${(p) => p.$height}px;
+`;
+var Day = styled52.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  background: ${(p) => p.$alt ? colors.grey_100 : colors.white};
+  border-right: 1px solid ${colors.grey_200};
+  box-sizing: border-box;
+`;
+var Band = styled52.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  background: ${colors.red_50};
+  border-left: 1.5px solid ${colors.red};
+  border-right: 1.5px solid ${colors.red};
+  box-sizing: border-box;
+  pointer-events: none;
+`;
+var Track3 = styled52.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: ${(p) => p.$top}px;
+  height: ${(p) => p.$rowHeight}px;
+  box-sizing: border-box;
+  border-top: ${(p) => p.$first ? "none" : `1px solid ${colors.grey_200}`};
+`;
+var Bar = styled52.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: ${(p) => p.$leftPct}%;
+  width: ${(p) => p.$widthPct}%;
+  height: 22px;
+  min-width: 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: ${(p) => p.$color};
+  border: 1.5px ${(p) => p.$dashed ? "dashed" : "solid"} ${(p) => p.$color};
+  opacity: ${(p) => p.$dashed ? 0.9 : 1};
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+`;
+var BarLabel = styled52.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: ${(p) => p.$textColor};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var Dot3 = styled52.span`
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  background: ${(p) => p.$color};
+`;
+var Swatch2 = styled52.span`
+  display: inline-block;
+  width: 18px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: ${(p) => p.$filled ? p.$color : "transparent"};
+  border: 1.5px solid ${(p) => p.$color};
+`;
 var Gantt = ({
   days,
   rows,
@@ -6076,105 +6239,82 @@ var Gantt = ({
 }) => {
   const bodyHeight = rows.length * rowHeight;
   const clickable = Boolean(onRowClick);
-  return /* @__PURE__ */ jsxs36(
-    "div",
-    {
-      className: "dz-gantt",
-      style: {
-        ["--dz-gantt-label-w"]: `${labelWidth}px`,
-        ["--dz-gantt-row-h"]: `${rowHeight}px`,
-        ["--dz-gantt-max-h"]: `${maxHeight}px`
-      },
-      children: [
-        /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__axis", children: [
-          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__axis-label", children: labelHeader }),
-          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__axis-days", children: days.map((day) => /* @__PURE__ */ jsx63(
-            "div",
-            {
-              className: "dz-gantt__axis-day",
-              style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` },
-              children: day.label
-            },
-            day.key
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__body", children: [
-          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__labels", children: rows.map((row, i) => /* @__PURE__ */ jsx63(
-            "div",
+  return /* @__PURE__ */ jsxs36(Root, { $labelWidth: labelWidth, $maxHeight: maxHeight, children: [
+    /* @__PURE__ */ jsxs36(Axis, { children: [
+      /* @__PURE__ */ jsx63(AxisLabel, { children: labelHeader }),
+      /* @__PURE__ */ jsx63(AxisDays, { children: days.map((day) => /* @__PURE__ */ jsx63(
+        AxisDay,
+        {
+          $leftPct: day.leftPct,
+          $widthPct: day.widthPct,
+          children: day.label
+        },
+        day.key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs36(Body, { children: [
+      /* @__PURE__ */ jsx63(Labels, { children: rows.map((row, i) => /* @__PURE__ */ jsx63(
+        LabelRow,
+        {
+          $rowHeight: rowHeight,
+          $alt: i % 2 === 1,
+          $clickable: clickable,
+          onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+          children: renderLabel(row, i)
+        },
+        row.key
+      )) }),
+      /* @__PURE__ */ jsx63(TimelineCol, { children: /* @__PURE__ */ jsxs36(Timeline2, { $height: bodyHeight, children: [
+        days.map((day, i) => /* @__PURE__ */ jsx63(
+          Day,
+          {
+            $leftPct: day.leftPct,
+            $widthPct: day.widthPct,
+            $alt: i % 2 === 1
+          },
+          day.key
+        )),
+        bands.map((band) => /* @__PURE__ */ jsx63(
+          Band,
+          {
+            title: band.title,
+            $leftPct: band.leftPct,
+            $widthPct: band.widthPct
+          },
+          band.key
+        )),
+        rows.map((row, i) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsx63(
+            Track3,
             {
-              className: [
-                "dz-gantt__labelrow",
-                i % 2 === 1 ? "dz-gantt__labelrow--alt" : "",
-                clickable ? "dz-gantt__labelrow--clickable" : ""
-              ].filter(Boolean).join(" "),
-              onClick: onRowClick ? () => onRowClick(row, i) : void 0,
-              children: renderLabel(row, i)
+              $top: i * rowHeight,
+              $rowHeight: rowHeight,
+              $first: i === 0,
+              children: row.bar && /* @__PURE__ */ jsx63(
+                Bar,
+                {
+                  title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
+                  $leftPct: row.bar.leftPct,
+                  $widthPct: row.bar.widthPct,
+                  $color: row.bar.color,
+                  $dashed: Boolean(row.bar.dashed),
+                  children: row.bar.label && /* @__PURE__ */ jsx63(BarLabel, { $textColor: (_c = row.bar.textColor) != null ? _c : colors.white, children: row.bar.label })
+                }
+              )
             },
             row.key
-          )) }),
-          /* @__PURE__ */ jsx63("div", { className: "dz-gantt__timeline-col", children: /* @__PURE__ */ jsxs36("div", { className: "dz-gantt__timeline", style: { height: bodyHeight }, children: [
-            days.map((day, i) => /* @__PURE__ */ jsx63(
-              "div",
-              {
-                className: `dz-gantt__day ${i % 2 === 1 ? "dz-gantt__day--alt" : ""}`,
-                style: { left: `${day.leftPct}%`, width: `${day.widthPct}%` }
-              },
-              day.key
-            )),
-            bands.map((band) => /* @__PURE__ */ jsx63(
-              "div",
-              {
-                className: "dz-gantt__band",
-                title: band.title,
-                style: { left: `${band.leftPct}%`, width: `${band.widthPct}%` }
-              },
-              band.key
-            )),
-            rows.map((row, i) => {
-              var _a, _b, _c;
-              return /* @__PURE__ */ jsx63(
-                "div",
-                {
-                  className: "dz-gantt__track",
-                  style: { top: i * rowHeight, height: rowHeight },
-                  children: row.bar && /* @__PURE__ */ jsx63(
-                    "div",
-                    {
-                      className: `dz-gantt__bar ${row.bar.dashed ? "dz-gantt__bar--approx" : ""}`,
-                      title: (_b = (_a = row.bar.title) != null ? _a : row.bar.label) != null ? _b : void 0,
-                      style: {
-                        left: `${row.bar.leftPct}%`,
-                        width: `${row.bar.widthPct}%`,
-                        ["--dz-gantt-bar-color"]: row.bar.color,
-                        ["--dz-gantt-bar-text"]: (_c = row.bar.textColor) != null ? _c : "#fff"
-                      },
-                      children: row.bar.label && /* @__PURE__ */ jsx63("span", { className: "dz-gantt__bar-label", children: row.bar.label })
-                    }
-                  )
-                },
-                row.key
-              );
-            })
-          ] }) })
-        ] })
-      ]
-    }
-  );
+          );
+        })
+      ] }) })
+    ] })
+  ] });
 };
-var GanttDot = ({ color }) => /* @__PURE__ */ jsx63("span", { className: "dz-gantt__dot", style: { background: color } });
+var GanttDot = ({ color }) => /* @__PURE__ */ jsx63(Dot3, { $color: color });
 var GanttSwatch = ({
   color,
   filled = true
-}) => /* @__PURE__ */ jsx63(
-  "span",
-  {
-    className: "dz-gantt__swatch",
-    style: {
-      background: filled ? color : "transparent",
-      border: `1.5px solid ${color}`
-    }
-  }
-);
+}) => /* @__PURE__ */ jsx63(Swatch2, { $color: color, $filled: filled });
 
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.277",
+  "version": "1.0.279",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",