@gnist/design-system 3.1.2-alpha.1 → 3.3.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.2.0...@gnist/design-system@3.3.0) (2025-05-30)
+
+### Features
+
+* change action in AlertBanner to use GhostButton instead of TextButton ([da7fdf2](https://github.com/mollerdigital/design-system-design-system/commit/da7fdf21956f6b10d683638029cce29ce7dace62))
+
+## [3.2.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.1.1...@gnist/design-system@3.2.0) (2025-05-19)
+
+### Features
+
+* updated tools theme and added surface-tertiary-variant roles ([caddea1](https://github.com/mollerdigital/design-system-design-system/commit/caddea1acc36087079288fb2d3ee34d2767a15cf))
+
 ## [3.1.2-alpha.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.1.2-alpha.0...@gnist/design-system@3.1.2-alpha.1) (2025-05-16)
 
 **Note:** Version bump only for package @gnist/design-system

package/dist/components/feedback/alerts/AlertBanner.cjs

@@ -14,8 +14,8 @@ require("../../actions/buttons/PrimaryButton.cjs");
 require("../../actions/buttons/SecondaryButton.cjs");
 require("../../actions/buttons/SuccessButton.cjs");
 require("../../actions/buttons/DangerButton.cjs");
-require("../../actions/buttons/GhostButton.cjs");
-const TextButton = require("../../actions/buttons/TextButton.cjs");
+const GhostButton = require("../../actions/buttons/GhostButton.cjs");
+require("../../actions/buttons/TextButton.cjs");
 const IconButton = require("../../actions/buttons/IconButton.cjs");
 const AlertBanner_css = require("./AlertBanner.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
@@ -23,6 +23,6 @@ const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const BannerHeading = componentUtils.component("BannerHeading", AlertBanner_css.bannerHeading, "h2");
 const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
   const text = index.useTranslation((t) => t.components.feedback.alerts);
-  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { className: AlertBanner_css.textButton, onClick: action.onClick, children: action.label })] })] });
+  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(GhostButton.GhostButton, { density: "compact", className: AlertBanner_css.actionButton, onClick: action.onClick, children: action.label })] })] });
 };
 exports.AlertBanner = AlertBanner;

package/dist/components/feedback/alerts/AlertBanner.css.cjs

@@ -51,7 +51,7 @@ const mainContentContainer = recipes.recipe({
   ],
   variants: {
     density: {
-      default: atoms_css_js.atoms({ marginLeft: "s" }),
+      default: atoms_css_js.atoms({ marginLeft: "xs" }),
       compact: atoms_css_js.atoms({ marginLeft: "xxs" })
     }
   }
@@ -62,11 +62,11 @@ const bannerHeading = css.style([
 ]);
 const closeButton = css.style({ float: "right" });
 const messageContainer = css.style({ clear: "left" });
-const textButton = atoms_css_js.atoms({ marginTop: "base" });
+const actionButton = atoms_css_js.atoms({ marginTop: "xs" });
+exports.actionButton = actionButton;
 exports.banner = banner;
 exports.bannerHeading = bannerHeading;
 exports.closeButton = closeButton;
 exports.icon = icon;
 exports.mainContentContainer = mainContentContainer;
 exports.messageContainer = messageContainer;
-exports.textButton = textButton;

package/dist/components/feedback/alerts/AlertBanner.css.d.ts

@@ -27,5 +27,5 @@ export declare const mainContentContainer: import("@vanilla-extract/recipes").Ru
 export declare const bannerHeading: string;
 export declare const closeButton: string;
 export declare const messageContainer: string;
-export declare const textButton: string;
+export declare const actionButton: string;
 //# sourceMappingURL=AlertBanner.css.d.ts.map

package/dist/components/feedback/alerts/AlertBanner.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;EASf,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAY/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA4B,CAAC;AAErD,eAAO,MAAM,gBAAgB,QAA2B,CAAC;AAEzD,eAAO,MAAM,UAAU,QAA+B,CAAC"}
+{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;EASf,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAY/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA4B,CAAC;AAErD,eAAO,MAAM,gBAAgB,QAA2B,CAAC;AAEzD,eAAO,MAAM,YAAY,QAA6B,CAAC"}

package/dist/components/feedback/alerts/AlertBanner.css.js

@@ -49,7 +49,7 @@ const mainContentContainer = recipe({
   ],
   variants: {
     density: {
-      default: atoms({ marginLeft: "s" }),
+      default: atoms({ marginLeft: "xs" }),
       compact: atoms({ marginLeft: "xxs" })
     }
   }
@@ -60,13 +60,13 @@ const bannerHeading = style([
 ]);
 const closeButton = style({ float: "right" });
 const messageContainer = style({ clear: "left" });
-const textButton = atoms({ marginTop: "base" });
+const actionButton = atoms({ marginTop: "xs" });
 export {
+  actionButton,
   banner,
   bannerHeading,
   closeButton,
   icon,
   mainContentContainer,
-  messageContainer,
-  textButton
+  messageContainer
 };

package/dist/components/feedback/alerts/AlertBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAcpD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CA8BlB,CAAC"}
+{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAcpD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CAkClB,CAAC"}

package/dist/components/feedback/alerts/AlertBanner.js

@@ -12,14 +12,14 @@ import "../../actions/buttons/PrimaryButton.js";
 import "../../actions/buttons/SecondaryButton.js";
 import "../../actions/buttons/SuccessButton.js";
 import "../../actions/buttons/DangerButton.js";
-import "../../actions/buttons/GhostButton.js";
-import { TextButton } from "../../actions/buttons/TextButton.js";
+import { GhostButton } from "../../actions/buttons/GhostButton.js";
+import "../../actions/buttons/TextButton.js";
 import { IconButton } from "../../actions/buttons/IconButton.js";
-import { bannerHeading, icon, mainContentContainer, closeButton, messageContainer, textButton, banner } from "./AlertBanner.css.js";
+import { bannerHeading, icon, mainContentContainer, closeButton, messageContainer, actionButton, banner } from "./AlertBanner.css.js";
 const BannerHeading = component("BannerHeading", bannerHeading, "h2");
 const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
   const text = useTranslation((t) => t.components.feedback.alerts);
-  return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(TextButton, { className: textButton, onClick: action.onClick, children: action.label })] })] });
+  return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(GhostButton, { density: "compact", className: actionButton, onClick: action.onClick, children: action.label })] })] });
 };
 export {
   AlertBanner

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "3.1.2-alpha.1",
+    "version": "3.3.0",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -49,7 +49,7 @@
     "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
         "@gnist/component-utils": "3.0.7",
-        "@gnist/themes": "^3.5.0-alpha.1",
+        "@gnist/themes": "^3.5.0",
         "@mui/base": "^5.0.0-beta.70",
         "@vanilla-extract/css": "^1.17.1",
         "@vanilla-extract/css-utils": "^0.1.4",
@@ -103,5 +103,5 @@
             "optional": true
         }
     },
-    "gitHead": "2a30d7960bf2c38b7953d8780b068165f8fa7b07"
+    "gitHead": "d6ba0247a006f558ff00e582b2a05b861e8e8917"
 }