@luscii-healthtech/web-ui 2.70.2 → 2.70.3

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

@@ -11,6 +11,11 @@ declare type FlexContainerBase = {
      */
     hasPadding?: boolean;
     backgroundColor?: string;
+    /**
+     * If `true`, will make the flexbox full width and not size it relative to its content.
+     * @default true
+     */
+    stretch?: boolean;
 };
 export declare type FlexContainerBaseProps = FlexContainerBase & {
     children: React.ReactNode;

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

@@ -481,9 +481,11 @@ var FlexContainer = function FlexContainer(props) {
       position = _props$position === void 0 ? "" : _props$position,
       type = props.type,
       _props$backgroundColo = props.backgroundColor,
-      backgroundColor = _props$backgroundColo === void 0 ? "bg-transparent" : _props$backgroundColo;
+      backgroundColor = _props$backgroundColo === void 0 ? "bg-transparent" : _props$backgroundColo,
+      _props$stretch = props.stretch,
+      stretch = _props$stretch === void 0 ? true : _props$stretch;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex w-full", backgroundColor, {
+    className: classNames("flex", backgroundColor, {
       "flex-row": type === "row",
       "flex-col": type === "column",
       relative: position === "relative",
@@ -506,7 +508,8 @@ var FlexContainer = function FlexContainer(props) {
       "space-y-2": verticalSpacing === "small",
       "space-y-4": verticalSpacing === "medium",
       "space-y-8": verticalSpacing === "large",
-      "p-4": hasPadding
+      "p-4": hasPadding,
+      "w-full": stretch
     })
   }, children);
 };
@@ -2993,7 +2996,9 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var isClearIconVisible = clearable && innerValue;
   return /*#__PURE__*/React__default.createElement(FlexRow, {
     spacing: "none",
-    "data-test-id": "input-component-container"
+    "data-test-id": "input-component-container",
+    position: "relative",
+    stretch: false
   }, /*#__PURE__*/React__default.createElement("span", {
     className: classNames("h-11 border-t border-b border-solid border-input-border", {
       hidden: hasNoExtraContent,
@@ -3010,9 +3015,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(IconComponentOrKey, {
     name: icon,
     className: "w-6 h-6 text-slate-300"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default.createElement("input", _extends({}, otherProps, {
+  })), /*#__PURE__*/React__default.createElement("input", _extends({}, otherProps, {
     "data-test-id": "input-" + name,
     name: name,
     value: innerValue,
@@ -3059,7 +3062,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       hidden: !isClearIconVisible
     }),
     onClick: clearField
-  }))));
+  })));
 });
 
 var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {