@agregio-solutions/design-system 2.3.0 → 2.3.1

package/dist/internal-components/DialogLayout/DialogLayout.styled.js

@@ -0,0 +1,43 @@
+import e from "../../components/Button/Button.js";
+import { keyframes as t, styled as n } from "styled-components";
+import { Heading as r } from "react-aria-components";
+//#region packages/internal-components/DialogLayout/DialogLayout.styled.ts
+var i = t`
+  from { background: rgba(0 0 0 / 0); }
+  to { background: rgba(0 12 51 / 0.7); }
+`, a = n.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
+    var(--spacing-sm);
+  gap: var(--spacing-xs);
+  background: var(--color-content-action-action-darker);
+`, o = n(r)`
+  margin: 0;
+  font-size: var(--text-font-size-md);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-primary-reversed);
+`, s = n(e)`
+  color: var(--color-content-neutral-primary-reversed);
+`, c = n.form`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: hidden;
+`, l = n.section`
+  padding: var(--spacing-lg);
+  flex: 1;
+  overflow-y: auto;
+`, u = n.footer`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
+  border-top: 1px solid var(--color-content-neutral-stroke);
+`;
+//#endregion
+export { s as CloseButton, u as DialogActions, l as DialogContent, c as DialogForm, o as Title, a as TitleSection, i as blur };

package/dist/internal-components/FormGroupHelper/FormGroupHelper.js

@@ -0,0 +1,17 @@
+import { CharacterCounter as e, Core as t, IconWrapper as n } from "./FormGroupHelper.styled.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/internal-components/FormGroupHelper/FormGroupHelper.tsx
+function a({ iconLeft: a, text: o, nature: s = "default", characterCounter: c }) {
+	return /* @__PURE__ */ i(t, {
+		"data-nature": s,
+		role: s === "negative" ? "alert" : void 0,
+		children: [
+			!!a && /* @__PURE__ */ r(n, { name: a }),
+			o,
+			/* @__PURE__ */ r(e, { children: c })
+		]
+	});
+}
+//#endregion
+export { a as default };

package/dist/internal-components/FormGroupHelper/FormGroupHelper.styled.js

@@ -0,0 +1,36 @@
+import e from "../../components/Icon/Icon.js";
+import { styled as t } from "styled-components";
+//#region packages/internal-components/FormGroupHelper/FormGroupHelper.styled.ts
+var n = t.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-xxs);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-style: normal;
+  font-weight: 400;
+
+  &[data-nature="default"] {
+    color: var(--color-content-neutral-secondary);
+  }
+
+  &[data-nature="negative"] {
+    color: var(--color-content-message-negative-darker);
+  }
+
+  &[data-nature="positive"] {
+    color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    color: var(--color-content-message-warning-darker);
+  }
+`, r = t(e)`
+  font-size: var(--text-font-size-md);
+  flex-shrink: 0;
+`, i = t.div`
+  margin-left: auto;
+`;
+//#endregion
+export { i as CharacterCounter, n as Core, r as IconWrapper };

package/dist/internal-components/FormGroupWrapper/FormGroupWrapper.js

@@ -0,0 +1,59 @@
+import e from "../../components/Label/Label.js";
+import { Core as t, StandaloneCharacterCounter as n, TopSection as r } from "./FormGroupWrapper.styled.js";
+import i from "../FormGroupHelper/FormGroupHelper.js";
+import a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/internal-components/FormGroupWrapper/FormGroupWrapper.tsx
+var c = a.forwardRef(({ htmlForId: a, required: c, label: u, labelIconRight: d, labelIconRightTooltip: f, helperTextIcon: p, helperText: m, children: h, errorHelperTextIcon: g, successHelperTextIcon: _, successHelperText: v, errorHelperText: y, characterCounter: b, warningHelperTextIcon: x, warningHelperText: S, orientation: C = "vertical", ...w }, T) => {
+	let E = l({
+		hasErrorHelperText: !!y,
+		hasSuccessHelperText: !!v,
+		hasHelperText: !!m,
+		hasCharacterCounter: !!b,
+		hasWarningHelperText: !!S
+	});
+	return /* @__PURE__ */ s(t, {
+		ref: T,
+		...w,
+		"data-orientation": C,
+		children: [
+			/* @__PURE__ */ s(r, {
+				"data-orientation": C,
+				children: [!!u && /* @__PURE__ */ o(e, {
+					htmlForId: a,
+					label: u,
+					labelIconRight: d,
+					labelIconRightTooltip: f,
+					required: c
+				}), h]
+			}),
+			!!y && /* @__PURE__ */ o(i, {
+				text: y,
+				iconLeft: g,
+				nature: "negative",
+				characterCounter: E === "errorHelperText" && b
+			}),
+			!!v && /* @__PURE__ */ o(i, {
+				text: v,
+				iconLeft: _,
+				nature: "positive",
+				characterCounter: E === "successHelperText" && b
+			}),
+			!!S && /* @__PURE__ */ o(i, {
+				text: S,
+				iconLeft: x,
+				nature: "warning",
+				characterCounter: E === "warningHelperText" && b
+			}),
+			!!m && /* @__PURE__ */ o(i, {
+				text: m,
+				iconLeft: p,
+				nature: "default",
+				characterCounter: E === "helperText" && b
+			}),
+			E === "standalone" && /* @__PURE__ */ o(n, { children: b })
+		]
+	});
+}), l = (e) => e.hasCharacterCounter ? e.hasErrorHelperText ? "errorHelperText" : e.hasSuccessHelperText ? "successHelperText" : e.hasWarningHelperText ? "warningHelperText" : e.hasHelperText ? "helperText" : "standalone" : "none";
+//#endregion
+export { c as default };

package/dist/internal-components/FormGroupWrapper/FormGroupWrapper.styled.js

@@ -0,0 +1,38 @@
+import { styled as e } from "styled-components";
+//#region packages/internal-components/FormGroupWrapper/FormGroupWrapper.styled.ts
+var t = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+`;
+e.div`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  row-gap: var(--spacing-xs);
+`;
+var n = e.div`
+  width: 100%;
+  text-align: end;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-sm);
+`, r = e.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+
+  &[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+  }
+`;
+//#endregion
+export { t as Core, n as StandaloneCharacterCounter, r as TopSection };

package/dist/internal-components/Logo/Logo.js

@@ -0,0 +1,18 @@
+import e from "../../components/Navigation/components/AgregioSolutionsLogo.js";
+import t from "../../components/Navigation/components/ConnectionManagementLogo.js";
+import n from "../../components/Navigation/components/IrisLogo.js";
+import r from "../../components/Navigation/components/VPPLogo.js";
+import i from "../../components/Navigation/components/OBILogo.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region packages/internal-components/Logo/Logo.tsx
+function o({ title: o, ...s }) {
+	switch (o) {
+		case "agregio": return /* @__PURE__ */ a(e, { ...s });
+		case "connection-management": return /* @__PURE__ */ a(t, { ...s });
+		case "iris": return /* @__PURE__ */ a(n, { ...s });
+		case "vpp": return /* @__PURE__ */ a(r, { ...s });
+		case "obi": return /* @__PURE__ */ a(i, { ...s });
+	}
+}
+//#endregion
+export { o as default };

package/dist/internal-components/MultiLineEllipsis/MultiLineEllipsis.js

@@ -0,0 +1,22 @@
+import { Container as e } from "./MultiLineEllipsis.styled.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region packages/internal-components/MultiLineEllipsis/MultiLineEllipsis.tsx
+function a({ text: a, maxLines: o = 2, style: s = {}, ...c }) {
+	let l = n(null), [u, d] = r(!1);
+	return t(() => {
+		let e = l.current;
+		e && d(e.scrollHeight > e.clientHeight + 1);
+	}, [a]), /* @__PURE__ */ i(e, {
+		...c,
+		title: u ? a : void 0,
+		style: {
+			...s,
+			WebkitLineClamp: o
+		},
+		ref: l,
+		children: a
+	});
+}
+//#endregion
+export { a as default };

package/dist/internal-components/MultiLineEllipsis/MultiLineEllipsis.styled.js

@@ -0,0 +1,12 @@
+import { styled as e } from "styled-components";
+//#region packages/internal-components/MultiLineEllipsis/MultiLineEllipsis.styled.ts
+var t = e.div`
+  display: -webkit-box;
+  max-width: 100%;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+//#endregion
+export { t as Container };

package/dist/packages/components/Calendar/doc.md

@@ -17,7 +17,7 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import Calendar, { CalendarCell } from "./Calendar";
 import { fn } from "storybook/test";
 import { useState } from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import YearMonthPicker from "../YearMonthPicker/YearMonthPicker";
 
 const meta: Meta<typeof Calendar> = {

package/dist/packages/components/Header/doc.md

@@ -27,7 +27,7 @@ import Tabs from "../Tabs/Tabs/Tabs";
 import Tab from "../Tabs/Tab/Tab";
 import TabList from "../Tabs/TabList/TabList";
 import TabPanel from "../Tabs/TabPanel/TabPanel";
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 const meta = {
   component: Header,
@@ -234,7 +234,7 @@ import Tabs from "../../Tabs/Tabs/Tabs";
 import Tab from "../../Tabs/Tab/Tab";
 import TabList from "../../Tabs/TabList/TabList";
 import TabPanel from "../../Tabs/TabPanel/TabPanel";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import * as HeaderMainStory from "../Header.stories";
 
 const meta: Meta<typeof Header> = {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
-  "module": "dist/design-system.js",
+  "module": "dist/index.js",
   "main": "dist/design-system.cjs",
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -32,6 +35,7 @@
     "storybook:test": "vitest run --project storybook",
     "storybook:test:llm": "DEBUG_PRINT_LIMIT=0 vitest run --project=storybook --reporter=dot --silent --changed --passWithNoTests",
     "storybook:test:only-changed": "vitest run --project storybook --changed",
+    "tree-shaking:check": "npm run build && node internal/tree-shaking-check.mjs",
     "typescript:check": "tsc --noEmit",
     "vitest:all": "vitest run --project unit",
     "vitest:only-changed": "vitest run --project unit --changed",