@luscii-healthtech/web-ui 2.44.4 → 2.44.5

package/dist/components/Container/types/FlexContainerProps.type.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type Spacing = "none" | "small" | "medium" | "large";
+declare type Spacing = "tiny" | "none" | "small" | "medium" | "large";
 declare type FlexContainerBase = {
     alignItems?: "center" | "start" | "end";
     justifyContent?: "center" | "start" | "end" | "between";

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { DynamicIconProps } from "../Icons/DynamicIcon";
 export declare type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
 export interface NotificationBannerLinkProps {
@@ -5,22 +6,29 @@ export interface NotificationBannerLinkProps {
     enabled: boolean;
     handleClick?: () => void;
 }
-export interface NotificationBannerProps {
-    title?: string;
+interface NotificationBannerPropsWithText {
     text?: string;
+    linkProps?: NotificationBannerLinkProps;
+    children?: never;
+}
+interface NotificationBannerPropsWithChildren {
+    children: React.ReactNode;
+    text?: never;
+    linkProps?: never;
+}
+export declare type NotificationBannerProps = (NotificationBannerPropsWithChildren | NotificationBannerPropsWithText) & {
     color?: NotificationBannerColor;
     /**
      * The icon can either be one of our icon components or an image url
      */
     icon?: DynamicIconProps["icon"];
-    linkProps?: NotificationBannerLinkProps;
     className?: string;
     stretch?: boolean;
     /**
      * When stretching the banner, you can also decide if the content should be centered or not.
      */
     centerContent?: boolean;
-}
+};
 export declare const NotificationBanner: {
     (props: NotificationBannerProps): JSX.Element;
     defaultProps: {
@@ -28,3 +36,4 @@ export declare const NotificationBanner: {
         onButtonClick: undefined;
     };
 };
+export {};

package/dist/web-ui-tailwind.css

@@ -615,6 +615,12 @@ video {
   margin-bottom: calc(0.25rem * var(--space-y-reverse));
 }
 
+.space-x-1 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--space-x-reverse)));
+}
+
 .space-y-2 > :not(template) ~ :not(template) {
   --space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--space-y-reverse)));

package/dist/web-ui.cjs.development.js

@@ -494,9 +494,11 @@ var FlexContainer = function FlexContainer(props) {
       "items-start": alignItems === "start",
       "items-center": alignItems === "center",
       "items-end": alignItems === "end",
+      "space-x-1": horizontalSpacing === "tiny",
       "space-x-2": horizontalSpacing === "small",
       "space-x-4": horizontalSpacing === "medium",
       "space-x-8": horizontalSpacing === "large",
+      "space-y-1": verticalSpacing === "tiny",
       "space-y-2": verticalSpacing === "small",
       "space-y-4": verticalSpacing === "medium",
       "space-y-8": verticalSpacing === "large",
@@ -2625,23 +2627,14 @@ var NotificationBanner = function NotificationBanner(props) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classes
   }, props.icon && /*#__PURE__*/React__default.createElement(DynamicIcon, {
-    className: "w-6 h-6",
+    className: "w-6 h-6 mr-3",
     icon: props.icon
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
-  }, props.title && /*#__PURE__*/React__default.createElement(Text, {
-    className: classNames({
-      "ml-3": props.icon
-    }),
-    text: props.title,
-    "data-test-id": "notification-title",
-    type: "strong",
-    color: color
-  }), (props.text || props.linkProps) && /*#__PURE__*/React__default.createElement("div", {
+  }, props.children, (props.text || props.linkProps) && /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row items-center"
   }, props.text && /*#__PURE__*/React__default.createElement(Text, {
     className: classNames({
-      "ml-3": props.icon,
       "mr-1": props.linkProps
     }),
     text: props.text,