@luscii-healthtech/web-ui 2.44.4 → 2.45.0

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/Icon/Icon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { IconProps, IconKey } from "../Icons/types/IconProps.type";
+export declare const Icon: React.FC<{
+    name: IconKey;
+} & IconProps>;
+export default Icon;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export { Icon } from "./Icon";

package/dist/components/Icons/types/IconProps.type.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import * as Icons from "../index";
 export interface IconProps {
     className?: string;
     onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
     "data-test-id"?: string;
 }
+export declare type IconKey = keyof typeof Icons;

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/index.d.ts

@@ -73,7 +73,8 @@ export { default as Text } from "./components/Text/Text";
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
 export { GenericForm, Form } from "./components/Form/Form";
 export { GenericFormProps, FormProps } from "./components/Form/form.types";
-export { IconProps } from "./components/Icons/types/IconProps.type";
+export { Icon } from "./components/Icon";
+export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";

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,
@@ -7828,6 +7821,60 @@ var StatusColoredIcon = function StatusColoredIcon(props) {
   }));
 };
 
+
+
+var Icons = {
+  __proto__: null,
+  AddIcon: AddIcon,
+  AlertsIcon: AlertsIcon,
+  BellIcon: BellIcon,
+  ChartIcon: ChartIcon,
+  ChartLineColoredIcon: ChartLineColoredIcon,
+  ChatBoxIcon: ChatBoxIcon,
+  CheckIcon: CheckIcon,
+  ChevronDoubleIcon: ChevronDoubleIcon,
+  CrossIcon: CrossIcon,
+  DeleteIcon: DeleteIcon,
+  DownArrowIcon: DownArrowIcon,
+  DragIcon: DragIcon,
+  EditIcon: EditIcon,
+  EmptyStateDashboardIcon: EmptyStateDashboardIcon,
+  ExclamationMarkIcon: ExclamationMarkIcon,
+  EyeIcon: EyeIcon,
+  GearIcon: GearIcon,
+  GearColoredIcon: GearColoredIcon,
+  GroupIcon: GroupIcon,
+  GroupColoredIcon: GroupColoredIcon,
+  HeartIcon: HeartIcon,
+  LeftArrowIcon: LeftArrowIcon,
+  LinkIcon: LinkIcon,
+  LightBulbIcon: LightBulbIcon,
+  LockIcon: LockIcon,
+  MessagesIcon: MessagesIcon,
+  NotesIcon: NotesIcon,
+  PinIcon: PinIcon,
+  PrintIcon: PrintIcon,
+  RightArrowIcon: RightArrowIcon,
+  SmallCircleIcon: SmallCircleIcon,
+  SmallDiamondIcon: SmallDiamondIcon,
+  SmallSquareIcon: SmallSquareIcon,
+  SpaceRocketIcon: SpaceRocketIcon,
+  StarIcon: StarIcon,
+  HamburgerIcon: HamburgerIcon,
+  SearchIcon: SearchIcon,
+  SearchCancelIcon: SearchCancelIcon,
+  InfoIcon: InfoIcon,
+  StatusColoredIcon: StatusColoredIcon
+};
+
+var _excluded$r = ["name"];
+var Icon = function Icon(_ref) {
+  var name = _ref.name,
+      iconProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+
+  return /*#__PURE__*/React__default.createElement(Icons[name], iconProps);
+};
+
 var FullPageModalHeader = function FullPageModalHeader(_ref) {
   var primaryButtonProps = _ref.primaryButtonProps,
       title = _ref.title;
@@ -7932,6 +7979,7 @@ exports.GroupIcon = GroupIcon;
 exports.HamburgerIcon = HamburgerIcon;
 exports.HeartIcon = HeartIcon;
 exports.INPUT_TYPES = INPUT_TYPES;
+exports.Icon = Icon;
 exports.ImagePicker = ImagePicker;
 exports.InfoBlock = InfoBlock;
 exports.InfoField = InfoField;