@luscii-healthtech/web-ui 2.12.0 → 2.12.3

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

@@ -1,16 +1,17 @@
 import React from "react";
+declare type Spacing = "none" | "small" | "medium" | "large";
 declare type FlexContainerBase = {
     alignItems?: "center" | "start" | "end";
     justifyContent?: "center" | "start" | "end" | "between";
     position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
-    verticallySpaced?: boolean;
-    horizontallySpaced?: boolean;
+    verticalSpacing?: Spacing;
+    horizontalSpacing?: Spacing;
     hasPadding?: boolean;
 };
 export declare type FlexContainerBaseProps = FlexContainerBase & {
     children: React.ReactNode;
 };
-export declare type FlexContainerProps = Omit<FlexContainerBaseProps, "verticallySpaced" | "horizontallySpaced"> & {
-    spaced?: boolean;
+export declare type FlexContainerProps = Omit<FlexContainerBaseProps, "verticalSpacing" | "horizontalSpacing"> & {
+    spacing?: Spacing;
 };
 export {};

package/dist/web-ui-tailwind.css

@@ -651,6 +651,18 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--space-x-reverse)));
 }
 
+.space-y-8 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(2rem * var(--space-y-reverse));
+}
+
+.space-x-8 > :not(template) ~ :not(template) {
+  --space-x-reverse: 0;
+  margin-right: calc(2rem * var(--space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--space-x-reverse)));
+}
+
 .divide-y > :not(template) ~ :not(template) {
   --divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--divide-y-reverse)));
@@ -1185,6 +1197,10 @@ video {
   flex-grow: 1;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .order-1 {
   order: 1;
 }
@@ -1233,10 +1249,6 @@ video {
   height: 3rem;
 }
 
-.h-13 {
-  height: 3.25rem;
-}
-
 .h-22 {
   height: 5.5rem;
 }

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

@@ -86,8 +86,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var FlexContainer = function FlexContainer(props) {
   var children = props.children,
       alignItems = props.alignItems,
-      verticallySpaced = props.verticallySpaced,
-      horizontallySpaced = props.horizontallySpaced,
+      _props$verticalSpacin = props.verticalSpacing,
+      verticalSpacing = _props$verticalSpacin === void 0 ? "none" : _props$verticalSpacin,
+      _props$horizontalSpac = props.horizontalSpacing,
+      horizontalSpacing = _props$horizontalSpac === void 0 ? "none" : _props$horizontalSpac,
       justifyContent = props.justifyContent,
       hasPadding = props.hasPadding,
       _props$position = props.position,
@@ -97,11 +99,11 @@ var FlexContainer = function FlexContainer(props) {
     className: classNames("flex w-full", {
       "flex-row": type === "row",
       "flex-col": type === "column",
-      "relative": position === "relative",
-      "absolute": position === "absolute",
-      "static": position === "static",
-      "fixed": position === "fixed",
-      "sticky": position === "sticky",
+      relative: position === "relative",
+      absolute: position === "absolute",
+      static: position === "static",
+      fixed: position === "fixed",
+      sticky: position === "sticky",
       "justify-center": justifyContent === "center",
       "justify-start": justifyContent === "start",
       "justify-end": justifyContent === "end",
@@ -109,14 +111,18 @@ var FlexContainer = function FlexContainer(props) {
       "items-start": alignItems === "start",
       "items-center": alignItems === "center",
       "items-end": alignItems === "end",
-      "space-x-4": horizontallySpaced,
-      "space-y-4": verticallySpaced,
+      "space-x-2": horizontalSpacing === "small",
+      "space-x-4": horizontalSpacing === "medium",
+      "space-x-8": horizontalSpacing === "large",
+      "space-y-2": verticalSpacing === "small",
+      "space-y-4": verticalSpacing === "medium",
+      "space-y-8": verticalSpacing === "large",
       "p-4": hasPadding
     })
   }, children);
 };
 
-var _excluded = ["children", "spaced"];
+var _excluded = ["children", "spacing"];
 /**
  * Container to be used for layouting instead of divs around the project.
  * The spacing here has been coded according to our guidelines.
@@ -124,17 +130,17 @@ var _excluded = ["children", "spaced"];
 
 var FlexColumn = function FlexColumn(props) {
   var children = props.children,
-      _props$spaced = props.spaced,
-      spaced = _props$spaced === void 0 ? true : _props$spaced,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? "medium" : _props$spacing,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React__default.createElement(FlexContainer, _extends({}, rest, {
     type: "column",
-    verticallySpaced: spaced
+    verticalSpacing: spacing
   }), children);
 };
 
-var _excluded$1 = ["children", "spaced"];
+var _excluded$1 = ["children", "spacing"];
 /**
  * Container to be used for layouting instead of divs around the project.
  * The spacing here has been coded according to our guidelines.
@@ -142,13 +148,13 @@ var _excluded$1 = ["children", "spaced"];
 
 var FlexRow = function FlexRow(props) {
   var children = props.children,
-      _props$spaced = props.spaced,
-      spaced = _props$spaced === void 0 ? true : _props$spaced,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? "medium" : _props$spacing,
       rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
   return /*#__PURE__*/React__default.createElement(FlexContainer, _extends({}, rest, {
     type: "row",
-    horizontallySpaced: spaced
+    horizontalSpacing: spacing
   }), children);
 };
 
@@ -1037,7 +1043,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   var isClearIconVisible = clearable && value;
   return /*#__PURE__*/React__default.createElement(FlexRow, {
-    spaced: false,
+    spacing: "none",
     "data-test-id": "input-component-container",
     position: "relative"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -1150,7 +1156,7 @@ var ButtonV2 = function ButtonV2(_ref) {
     return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
   }
 
-  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary", "group"], {
+  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary", "group", "flex-shrink-0"], {
     "w-11": !text && icon,
     "pl-4 pr-6": text && icon,
     "px-4": text && !icon
@@ -4051,7 +4057,7 @@ var NotificationBanner = function NotificationBanner(props) {
       stretch = _props$stretch === void 0 ? true : _props$stretch,
       _props$centerContent = props.centerContent,
       centerContent = _props$centerContent === void 0 ? false : _props$centerContent;
-  var classes = classNames("px-6 py-4 h-13 flex flex-row items-center border border-solid rounded", props.className, {
+  var classes = classNames("px-6 py-4 min-h-13 flex flex-row items-center border border-solid rounded", props.className, {
     "bg-slate-100 border-slate-300 text-slate-700": props.color === "base",
     "bg-blue-50 border-blue-700 text-blue-800": props.color === "blue",
     "bg-red-50 border-red-700 text-red-700": props.color === "red",