design-zystem 1.0.268 → 1.0.270

package/dist/index.d.mts

@@ -918,15 +918,16 @@ interface BannerToggle {
     disabled?: boolean;
 }
 interface BannerProps {
-    variant?: 'blue' | 'red';
+    variant?: string;
     badge?: string;
     title?: string;
     subtitle?: string;
     message?: string;
     action?: BannerAction;
     toggle?: BannerToggle;
+    children?: ReactNode;
 }
-declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
+declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.d.ts

@@ -918,15 +918,16 @@ interface BannerToggle {
     disabled?: boolean;
 }
 interface BannerProps {
-    variant?: 'blue' | 'red';
+    variant?: string;
     badge?: string;
     title?: string;
     subtitle?: string;
     message?: string;
     action?: BannerAction;
     toggle?: BannerToggle;
+    children?: ReactNode;
 }
-declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
+declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.js

@@ -5186,24 +5186,36 @@ var Card2 = ({
 // src/Components/Banner/Banner.tsx
 var import_styled_components45 = __toESM(require("styled-components"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var variantStyles = {
+var PRESET_STYLES = {
   blue: {
     background: "rgba(219, 233, 254, 0.4)",
     borderColor: "#BEDBFF",
     badgeBackground: colors.badge_blue_bg,
     badgeColor: colors.badge_blue_text,
-    action: "blue_950",
-    switchColor: colors.blue_950
+    accent: colors.blue_950
   },
   red: {
     background: "rgba(252, 221, 222, 0.4)",
     borderColor: "#FFD2D2",
     badgeBackground: "#FCDDDE",
     badgeColor: colors.red_950,
-    action: "red_950",
-    switchColor: colors.red_950
+    accent: colors.red_950
   }
 };
+var resolveStyle = (variant) => {
+  const preset = PRESET_STYLES[variant];
+  if (preset) return preset;
+  return {
+    background: `${variant}14`,
+    // ~8 %
+    borderColor: `${variant}40`,
+    // ~25 %
+    badgeBackground: `${variant}24`,
+    // ~14 %
+    badgeColor: variant,
+    accent: variant
+  };
+};
 var StyledBanner = import_styled_components45.default.div`
   box-sizing: border-box;
   width: 100%;
@@ -5234,9 +5246,20 @@ var Banner = ({
   subtitle,
   message,
   action,
-  toggle
+  toggle,
+  children
 }) => {
-  const style2 = variantStyles[variant];
+  const style2 = resolveStyle(variant);
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      StyledBanner,
+      {
+        $background: style2.background,
+        $borderColor: style2.borderColor,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     StyledBanner,
     {
@@ -5261,12 +5284,12 @@ var Banner = ({
               {
                 size: "s",
                 weight: "700",
-                variant: toggle ? style2.action : void 0,
+                color: toggle ? style2.accent : void 0,
                 children: title
               }
             )
           ] }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", color: toggle ? style2.accent : void 0, children: subtitle })
         ] }) }),
         toggle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Switch,
@@ -5274,14 +5297,14 @@ var Banner = ({
             checked: toggle.checked,
             onChange: toggle.onChange,
             disabled: toggle.disabled,
-            color: style2.switchColor
+            color: style2.accent
           }
         ) : action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Button,
           {
             outline: true,
             size: "xs",
-            variant: style2.action,
+            variant: style2.accent,
             iconLeft: action.icon,
             label: action.label,
             onClick: action.onClick

package/dist/index.mjs

@@ -5070,24 +5070,36 @@ var Card2 = ({
 // src/Components/Banner/Banner.tsx
 import styled45 from "styled-components";
 import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
-var variantStyles = {
+var PRESET_STYLES = {
   blue: {
     background: "rgba(219, 233, 254, 0.4)",
     borderColor: "#BEDBFF",
     badgeBackground: colors.badge_blue_bg,
     badgeColor: colors.badge_blue_text,
-    action: "blue_950",
-    switchColor: colors.blue_950
+    accent: colors.blue_950
   },
   red: {
     background: "rgba(252, 221, 222, 0.4)",
     borderColor: "#FFD2D2",
     badgeBackground: "#FCDDDE",
     badgeColor: colors.red_950,
-    action: "red_950",
-    switchColor: colors.red_950
+    accent: colors.red_950
   }
 };
+var resolveStyle = (variant) => {
+  const preset = PRESET_STYLES[variant];
+  if (preset) return preset;
+  return {
+    background: `${variant}14`,
+    // ~8 %
+    borderColor: `${variant}40`,
+    // ~25 %
+    badgeBackground: `${variant}24`,
+    // ~14 %
+    badgeColor: variant,
+    accent: variant
+  };
+};
 var StyledBanner = styled45.div`
   box-sizing: border-box;
   width: 100%;
@@ -5118,9 +5130,20 @@ var Banner = ({
   subtitle,
   message,
   action,
-  toggle
+  toggle,
+  children
 }) => {
-  const style2 = variantStyles[variant];
+  const style2 = resolveStyle(variant);
+  if (children) {
+    return /* @__PURE__ */ jsx54(
+      StyledBanner,
+      {
+        $background: style2.background,
+        $borderColor: style2.borderColor,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs28(
     StyledBanner,
     {
@@ -5145,12 +5168,12 @@ var Banner = ({
               {
                 size: "s",
                 weight: "700",
-                variant: toggle ? style2.action : void 0,
+                color: toggle ? style2.accent : void 0,
                 children: title
               }
             )
           ] }),
-          subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
+          subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", color: toggle ? style2.accent : void 0, children: subtitle })
         ] }) }),
         toggle ? /* @__PURE__ */ jsx54(
           Switch,
@@ -5158,14 +5181,14 @@ var Banner = ({
             checked: toggle.checked,
             onChange: toggle.onChange,
             disabled: toggle.disabled,
-            color: style2.switchColor
+            color: style2.accent
           }
         ) : action && /* @__PURE__ */ jsx54(
           Button,
           {
             outline: true,
             size: "xs",
-            variant: style2.action,
+            variant: style2.accent,
             iconLeft: action.icon,
             label: action.label,
             onClick: action.onClick

package/package.json

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