@luscii-healthtech/web-ui 28.3.0 → 28.3.2

package/dist/components/Box/Box.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SIZES } from "../../system/Sizes";
 import { ELEVATION } from "../../system/Elevation";
+import { BackgroundColor } from "../../types/general.types";
 type Size = keyof typeof SIZES;
 declare const spacingKeys: readonly ["p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my"];
 type SpacingProps = Partial<Record<(typeof spacingKeys)[number], Size>>;
@@ -15,6 +16,12 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * Make the item fill up horizontal space
      */
     width?: "full" | keyof typeof SIZES;
+    backgroundColor?: BackgroundColor;
+    /**
+     * Will set a border radius based on the standard sizes scale.
+     * Check {@link SIZES} for reference.
+     */
+    borderRadius?: "xxxs";
 };
 export declare const Box: <C extends React.ElementType = "div">(props: Props<C>) => React.JSX.Element;
 export {};

package/dist/index.development.js

@@ -1521,7 +1521,7 @@ const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
         "focus:ui-border-primary": !isError,
         "focus:ui-outline-primary": !isError,
         "ui-bg-white": !attributes.disabled
-      }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-sm", "ui-placeholder-slate-500", "ui-border-solid", "ui-transition-colors", "ui-duration-300", {
+      }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-base sm:ui-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,
@@ -1990,9 +1990,15 @@ const Box = (props) => {
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
+    "ui-bg-slate-100": props.backgroundColor === "base",
+    "ui-bg-blue-50": props.backgroundColor === "blue",
+    "ui-bg-red-50": props.backgroundColor === "red",
+    " ui-bg-green-50": props.backgroundColor === "green",
+    " ui-bg-amber-50": props.backgroundColor === "amber",
     [`ui-shadow-${elevation}`]: elevation,
     [`ui-w-${width}`]: width && width !== "full",
-    "ui-w-full": width === "full"
+    "ui-w-full": width === "full",
+    "ui-radius-xxxs": props.borderRadius
   }, className) }, attributesWithoutSpacingKeys));
 };