@luscii-healthtech/web-ui 2.12.2 → 2.12.5

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)));

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", {