@luscii-healthtech/web-ui 40.6.3 → 40.6.5

package/dist/index.development.js

@@ -1620,16 +1620,24 @@ const calculateResponsiveWidthClasses = (size) => {
 };
 
 const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
-  var { suffix, prefix, className, width = "full", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
+  var { suffix, prefix, className, width = "full", height = "lg", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "height", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
   const hasPrefix = !!prefix;
   const hasSuffix = !!suffix;
   const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui:h-11 ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
+  const heightClasses = {
+    md: "ui:h-form-md",
+    lg: "ui:h-form-lg"
+  };
+  const prefixSuffixPaddingClasses = {
+    md: "ui:py-2 ui:px-3",
+    lg: "ui:p-3"
+  };
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], prefixSuffixPaddingClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
     "ui:hidden": hasNoExtraContent,
     "ui:order-1": hasSuffix,
     "ui:rounded-l ui:border-l": hasPrefix,
     "ui:rounded-r ui:border-r": hasSuffix
-  }, "ui:flex ui:flex-col ui:items-center ui:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
+  }, "ui:flex ui:flex-col ui:items-center", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
     "ui:flex ui:grow": width === "full"
   }), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-4 ui:top-1/2", {
     "ui:grow": width === "full"
@@ -1646,7 +1654,7 @@ const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
     "ui:focus:border-primary": !isError,
     "ui:focus:outline-primary": !isError,
     "ui:bg-white": !attributes.disabled
-  }, "ui:h-11", "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
+  }, heightClasses[height], "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
     "ui:z-10": hasSuffix || hasPrefix,
     // to make sure the ui:outline is displayed completely
     "ui:rounded": hasNoExtraContent,
@@ -1663,7 +1671,7 @@ const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
 });
 
 const Input = React__namespace.default.forwardRef((_a, ref) => {
-  var { withSuffix = "", withPrefix = "", clearable = false, isDisabled = false, name, value = "", onChange, asFormField, maxLength } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "clearable", "isDisabled", "name", "value", "onChange", "asFormField", "maxLength"]);
+  var { withSuffix = "", withPrefix = "", clearable = false, isDisabled = false, name, value = "", onChange, asFormField, maxLength, height = "lg" } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "clearable", "isDisabled", "name", "value", "onChange", "asFormField", "maxLength", "height"]);
   const [innerValue, setInnerValue] = React.useState(value);
   React.useEffect(() => {
     setInnerValue(value);
@@ -1695,7 +1703,7 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
     });
   };
   const isClearIconVisible = clearable && !!innerValue;
-  return jsxRuntime.jsx(StyledInput, Object.assign({ "data-test-id": `input-${name}`, name, value: innerValue, onChange: handleChangeEvent, ref, size: maxLength, disabled: isDisabled, isClearIconVisible, onClickClearField: clearField, prefix: withPrefix, suffix: withSuffix }, otherProps));
+  return jsxRuntime.jsx(StyledInput, Object.assign({ "data-test-id": `input-${name}`, name, value: innerValue, onChange: handleChangeEvent, ref, size: maxLength, disabled: isDisabled, isClearIconVisible, onClickClearField: clearField, prefix: withPrefix, suffix: withSuffix, height }, otherProps));
 });
 
 const SearchInput = React__namespace.default.forwardRef((props, ref) => {
@@ -4378,51 +4386,43 @@ var css_248z$3 = ".styled-select {\n  appearance: none;\n}\n.styled-select::pick
 styleInject(css_248z$3);
 
 const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
-  var { children, suffix, prefix, className, width = "full", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "isError"]);
+  var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
   const hasPrefix = !!prefix;
   const hasSuffix = !!suffix;
   const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui:h-11 ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
+  const heightClasses = {
+    md: "ui:h-form-md",
+    lg: "ui:h-form-lg"
+  };
+  const paddingClasses = {
+    md: "ui:px-3 py-2 ui:pr-10",
+    // pr-10 to account for the chevron icon
+    lg: "ui:p-3 ui:pr-10"
+  };
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
     "ui:hidden": hasNoExtraContent,
     "ui:order-1": hasSuffix,
     "ui:rounded-l ui:border-l": hasPrefix,
     "ui:rounded-r ui:border-r": hasSuffix
   }, "ui:flex ui:flex-col ui:items-center ui:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
     "ui:flex ui:grow": width === "full"
-  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default(
-    "styled-select",
-    "ui:block ui:min-w-[4rem]",
-    calculateResponsiveWidthClasses(width),
-    {
-      "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
-      "ui:text-slate-800": !attributes.disabled,
-      "ui:border-input-border": !attributes.disabled && !isError,
-      "ui:hover:border-input-border-dark": !attributes.disabled,
-      "ui:border-red-700": isError,
-      "ui:focus:outline-negative": isError,
-      "ui:focus:border-primary": !isError,
-      "ui:focus:outline-primary": !isError,
-      "ui:bg-white": !attributes.disabled
-    },
-    "ui:h-11",
-    "ui:p-2 ui:pr-10",
-    // pr-10 to account for the chevron icon
-    "ui:border",
-    "ui:text-base ui:sm:text-sm",
-    "ui:placeholder-slate-500",
-    "ui:border-solid",
-    "ui:transition-colors",
-    "ui:duration-300",
-    {
-      "ui:rounded": hasNoExtraContent,
-      "ui:rounded-l": hasSuffix,
-      "ui:rounded-r": hasPrefix,
-      "ui:order-2": hasPrefix,
-      "ui:order-1": hasSuffix
-    },
-    "ui:shadow-default",
-    className
-  ) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2 ui:z-20", style: {
+  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui:block ui:min-w-[4rem]", calculateResponsiveWidthClasses(width), {
+    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
+    "ui:text-slate-800": !attributes.disabled,
+    "ui:border-input-border": !attributes.disabled && !isError,
+    "ui:hover:border-input-border-dark": !attributes.disabled,
+    "ui:border-red-700": isError,
+    "ui:focus:outline-negative": isError,
+    "ui:focus:border-primary": !isError,
+    "ui:focus:outline-primary": !isError,
+    "ui:bg-white": !attributes.disabled
+  }, heightClasses[height], paddingClasses[height], "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
+    "ui:rounded": hasNoExtraContent,
+    "ui:rounded-l": hasSuffix,
+    "ui:rounded-r": hasPrefix,
+    "ui:order-2": hasPrefix,
+    "ui:order-1": hasSuffix
+  }, "ui:shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2 ui:z-20", style: {
     transform: "translateY(-50%)"
   }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:text-slate-300") }) })] })] });
 });
@@ -5864,7 +5864,7 @@ PageWithCenteredContentLayout.Header = Header;
 PageWithCenteredContentLayout.Main = Main;
 
 const InputSelectInput = React__namespace.default.forwardRef((props, ref) => {
-  return jsxRuntime.jsx(Input, Object.assign({ ref }, props));
+  return jsxRuntime.jsx(StyledInput, Object.assign({ ref }, props));
 });
 InputSelectInput.displayName = "InputSelect.Input";
 
@@ -5873,15 +5873,17 @@ const InputSelectSelect = React__namespace.default.forwardRef((props, ref) => {
 });
 InputSelectSelect.displayName = "InputSelect.Select";
 
-const createStyledSelectChild = (child, isFirstChild) => {
+const createStyledSelectChild = (child, options) => {
+  const { isFirstChild, height } = options;
   const isDisabled = child.props.disabled;
   const isError = child.props.isError;
   const zIndexClass = isDisabled ? "ui:relative" : isError ? "ui:relative ui:z-[2] ui:hover:z-[3] ui:focus:z-[4]" : "ui:relative ui:z-0 ui:hover:z-[3] ui:focus:z-[4]";
   const borderRadiusClass = isFirstChild ? "ui:rounded-r-none ui:focus:rounded-r-none" : "ui:rounded-l-none ui:focus:rounded-l-none";
   const marginClass = isFirstChild ? "" : "ui:-ml-px";
-  return React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, marginClass, borderRadiusClass), style: Object.assign({ backgroundColor: "var(--ui-color-background)", color: "var(--ui-color-on-surface-variant)" }, child.props.style) }));
+  return React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, marginClass, borderRadiusClass), height, style: Object.assign({ backgroundColor: "var(--ui-color-background)", color: "var(--ui-color-on-surface-variant)" }, child.props.style) }));
 };
-const createStyledInputChild = (child, isFirstChild) => {
+const createStyledInputChild = (child, options) => {
+  const { isFirstChild, height } = options;
   const isFullWidth = child.props.width === "full";
   const hasExplicitWidth = child.props.width !== void 0;
   const isDisabled = child.props.isDisabled;
@@ -5889,7 +5891,7 @@ const createStyledInputChild = (child, isFirstChild) => {
   const zIndexClass = isDisabled ? "ui:relative" : isError ? "ui:relative ui:z-[2] ui:hover:z-[3] ui:focus:z-[4]" : isFirstChild ? "ui:relative ui:z-[1] ui:focus:z-[4]" : "ui:relative ui:z-0 ui:focus:z-[4]";
   const borderRadiusClass = isFirstChild ? "ui:rounded-r-none ui:focus:rounded-r-none" : "ui:rounded-l-none ui:focus:rounded-l-none";
   const marginClass = hasExplicitWidth ? "" : isFirstChild ? "ui:-mr-px" : "ui:-ml-px";
-  const styledInput = React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, borderRadiusClass, marginClass) }));
+  const styledInput = React__namespace.default.cloneElement(child, Object.assign(Object.assign({}, child.props), { className: classNames__default.default(child.props.className, zIndexClass, borderRadiusClass, marginClass), height }));
   if (isFullWidth) {
     return jsxRuntime.jsx("div", { className: "ui:flex-1", children: styledInput });
   }
@@ -5897,7 +5899,7 @@ const createStyledInputChild = (child, isFirstChild) => {
 };
 
 const InputSelect = React__namespace.default.forwardRef((props, ref) => {
-  const { className, children } = props;
+  const { className, children, height = "lg" } = props;
   const childrenArray = React__namespace.default.Children.toArray(children);
   if (childrenArray.length !== 2) {
     console.error("InputSelect requires exactly 2 children: InputSelect.Input and InputSelect.Select");
@@ -5917,9 +5919,9 @@ const InputSelect = React__namespace.default.forwardRef((props, ref) => {
     const isSelectChild = child.type === InputSelectSelect;
     const isInputChild = child.type === InputSelectInput;
     if (isSelectChild) {
-      return createStyledSelectChild(child, isFirstChild);
+      return createStyledSelectChild(child, { isFirstChild, height });
     } else if (isInputChild) {
-      return createStyledInputChild(child, isFirstChild);
+      return createStyledInputChild(child, { isFirstChild, height });
     }
     return child;
   });