@luscii-healthtech/web-ui 28.11.1 → 28.12.0

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

@@ -21,7 +21,7 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * Will set a border radius based on the standard sizes scale.
      * Check {@link SIZES} for reference.
      */
-    borderRadius?: "xxxs";
+    borderRadius?: keyof typeof SIZES;
 };
 export declare const Box: <C extends React.ElementType = "div">(props: Props<C>) => React.JSX.Element;
 export {};

package/dist/components/Card/Card.d.ts

@@ -32,7 +32,18 @@ type TitleAndMaybeActions = {
 };
 export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
     as?: C;
+    border?: boolean;
+    borderRadius?: BoxProps<C>["borderRadius"];
     children: React.ReactNode;
+    /**
+     * Adds a box-shadow to the element based on the design system
+     */
+    elevation?: BoxProps<C>["elevation"];
+    /**
+     * The elevation from the design system to apply when hovering over the card.
+     */
+    elevationOnHover?: BoxProps<C>["elevation"];
+    indicatorOnHover?: boolean;
     /**
      * Whether or not to add the default padding to the card. Set this
      * to `false` if you want to render something full width inside of the
@@ -42,10 +53,6 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * @default true
      */
     padding?: boolean;
-    /**
-     * Adds a box-shadow to the element based on the design system
-     */
-    elevation?: BoxProps<C>["elevation"];
 } & TitleAndMaybeActions;
 export declare function Card<C extends React.ElementType = "div">(props: Props<C>): React.JSX.Element;
 export declare namespace Card {

package/dist/components/Card/HoverIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type Props as BoxProps } from "../Box/Box";
+type Props = {
+    borderRadius?: BoxProps<"div">["borderRadius"];
+    children: React.ReactNode;
+};
+export declare const HoverIndicator: (props: Props) => React.JSX.Element;
+export {};

package/dist/components/Text/Text.d.ts

@@ -8,10 +8,10 @@ import "./Text.css";
  * https://v1.tailwindcss.com/docs/controlling-file-size
  */
 export declare const allowedTextStyles: {
-    readonly sm: "ui-text-xs ui-font-medium";
-    readonly "sm-strong": "ui-text-xs ui-font-semibold ui-antialiased";
-    readonly base: "ui-text-sm";
-    readonly strong: "ui-text-sm ui-font-semibold ui-antialiased";
+    readonly sm: `${string} ui-font-medium`;
+    readonly "sm-strong": `${string} ui-font-semibold ui-antialiased`;
+    readonly base: string;
+    readonly strong: `${string} ui-font-semibold ui-antialiased`;
     readonly lg: "";
     readonly "lg-strong": "ui-font-semibold ui-antialiased";
     readonly xl: "ui-text-lg";

package/dist/index.development.js

@@ -949,11 +949,15 @@ function styleInject(css, ref) {
 var css_248z$j = "/* https://stackoverflow.com/a/13924997 */\n.ui-text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
 styleInject(css_248z$j);
 
+const responsiveTextSizeVariants = {
+  sm: "ui-text-sm sm:ui-text-xs",
+  base: "ui-text-base sm:ui-text-sm"
+};
 const allowedTextStyles = {
-  sm: "ui-text-xs ui-font-medium",
-  "sm-strong": "ui-text-xs ui-font-semibold ui-antialiased",
-  base: "ui-text-sm",
-  strong: "ui-text-sm ui-font-semibold ui-antialiased",
+  sm: `${responsiveTextSizeVariants.sm} ui-font-medium`,
+  "sm-strong": `${responsiveTextSizeVariants.sm} ui-font-semibold ui-antialiased`,
+  base: responsiveTextSizeVariants.base,
+  strong: `${responsiveTextSizeVariants.base} ui-font-semibold ui-antialiased`,
   lg: "",
   "lg-strong": "ui-font-semibold ui-antialiased",
   xl: "ui-text-lg",
@@ -994,6 +998,7 @@ const Text = (props) => {
       allowedColors[color !== null && color !== void 0 ? color : "base"],
       selectedHoverColor,
       selectedGroupHoverColor,
+      "leading-6 sm:leading-5",
       {
         "ui-inline": inline,
         // FIXME: this class doesn't do anything without a ui-max-width
@@ -1738,7 +1743,7 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     "ui-px-[calc(theme('spacing.m')-1px)]": true,
     "ui-py-[calc(theme('spacing.xxs')-1px)]": size === "medium",
     "ui-py-[calc(theme('spacing.s')-1px)]": size === "large"
-  }, className);
+  }, "ui-h-12 sm:ui-h-auto", className);
   const textColorClass = allowedColors[textColor !== null && textColor !== void 0 ? textColor : "base"];
   const tooltipAttrs = title ? {
     "data-tip": true,
@@ -2070,6 +2075,121 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
   );
 };
 
+const ELEVATION = {
+  surface: "none",
+  base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
+  small: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+  medium: "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  large: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  extraLarge: "0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)",
+  drag: "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)"
+};
+
+const createShadowClassName = (elevation, options) => {
+  if (!elevation || !ELEVATION[elevation]) {
+    return "";
+  }
+  const { modifier } = options || {};
+  if (modifier === "hover") {
+    return classNames__default.default({
+      "hover:ui-shadow-base": elevation === "base",
+      "hover:ui-shadow-small": elevation === "small",
+      "hover:ui-shadow-medium": elevation === "medium",
+      "hover:ui-shadow-large": elevation === "large",
+      "hover:ui-shadow-surface": elevation === "surface",
+      "hover:ui-shadow-extraLarge": elevation === "extraLarge",
+      "hover:ui-shadow-drag": elevation === "drag"
+    });
+  }
+  if (modifier === "focus") {
+    return classNames__default.default({
+      "focus:ui-shadow-base": elevation === "base",
+      "focus:ui-shadow-small": elevation === "small",
+      "focus:ui-shadow-medium": elevation === "medium",
+      "focus:ui-shadow-large": elevation === "large",
+      "focus:ui-shadow-surface": elevation === "surface",
+      "focus:ui-shadow-extraLarge": elevation === "extraLarge",
+      "focus:ui-shadow-drag": elevation === "drag"
+    });
+  }
+  if (modifier === "active") {
+    return classNames__default.default({
+      "active:ui-shadow-base": elevation === "base",
+      "active:ui-shadow-small": elevation === "small",
+      "active:ui-shadow-medium": elevation === "medium",
+      "active:ui-shadow-large": elevation === "large",
+      "active:ui-shadow-surface": elevation === "surface",
+      "active:ui-shadow-extraLarge": elevation === "extraLarge",
+      "active:ui-shadow-drag": elevation === "drag"
+    });
+  }
+  return classNames__default.default({
+    "ui-shadow-base": elevation === "base",
+    "ui-shadow-small": elevation === "small",
+    "ui-shadow-medium": elevation === "medium",
+    "ui-shadow-large": elevation === "large",
+    "ui-shadow-surface": elevation === "surface",
+    "ui-shadow-extraLarge": elevation === "extraLarge",
+    "ui-shadow-drag": elevation === "drag"
+  });
+};
+
+const SIZES = {
+  /**
+   * Represents the tiny size of 4px.
+   */
+  xxxxs: "4px",
+  /**
+   * Represents a very extra extra small size of 6px.
+   */
+  xxxs: "6px",
+  /**
+   * Represents an extra extra small size of 8px.
+   */
+  xxs: "8px",
+  /**
+   * Represents an extra small size of 10px.
+   */
+  xs: "10px",
+  /**
+   * Represents a small size of 12px.
+   */
+  s: "12px",
+  /**
+   * Represents a medium size of 16px.
+   */
+  m: "16px",
+  /**
+   * Represents a large size of 24px.
+   */
+  l: "24px",
+  /**
+   * Represents an extra large size of 32px.
+   */
+  xl: "32px",
+  /**
+   * Represents an extra extra large size of 32px.
+   */
+  xxl: "32px"
+};
+
+const createRadiusClassName = (borderRadius) => {
+  if (!borderRadius || !SIZES[borderRadius]) {
+    return "";
+  }
+  return classNames__default.default({
+    "ui-radius-xxxxs": borderRadius === "xxxxs",
+    "ui-radius-xxxs": borderRadius === "xxxs",
+    "ui-radius-xxs": borderRadius === "xxs",
+    "ui-radius-xs": borderRadius === "xs",
+    "ui-radius-s": borderRadius === "s",
+    "ui-radius-m": borderRadius === "m",
+    "ui-radius-l": borderRadius === "l",
+    "ui-radius-xl": borderRadius === "xl",
+    "ui-radius-xxl": borderRadius === "xxl"
+  });
+};
+
 const spacingKeys = [
   "p",
   "pt",
@@ -2090,8 +2210,10 @@ const createSpacingClassNames = (keys, spacingProps) => {
   return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
 };
 const Box = (props) => {
-  const { as: Element = "div", className, elevation, width } = props, attributes = __rest(props, ["as", "className", "elevation", "width"]);
+  const { as: Element = "div", borderRadius, className, elevation, width } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width"]);
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const shadowClassName = createShadowClassName(elevation);
+  const borderRadiusClassName = createRadiusClassName(borderRadius);
   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",
@@ -2099,11 +2221,9 @@ const Box = (props) => {
     "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-radius-xxxs": props.borderRadius
-  }, className) }, attributesWithoutSpacingKeys));
+    "ui-w-full": width === "full"
+  }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
 };
 
 const Stack = (props) => {
@@ -2536,7 +2656,7 @@ const Carousel = ({ slides, className, id }) => {
   ) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
 };
 
-var css_248z$c = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  --tw-border-opacity: 1;\n  border-color: rgb(155 44 44 / var(--tw-border-opacity));\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
+var css_248z$c = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  --tw-border-opacity: 1;\n  border-color: rgb(155 44 44 / var(--tw-border-opacity));\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
 styleInject(css_248z$c);
 
 const CheckboxInner = (props) => {
@@ -2589,18 +2709,18 @@ const CheckboxInner = (props) => {
         { className: "ui-flex" },
         React__namespace.default.createElement(
           "div",
-          { className: "ui-flex ui-h-[20px] ui-flex-col ui-justify-center" },
+          { className: "ui-flex ui-h-[24px] ui-flex-col ui-justify-center sm:ui-h-[20px]" },
           React__namespace.default.createElement("input", { id, ref: innerRef, "data-test-id": `checkbox-${name}`, className: "cweb-checkbox-input", name, type: "checkbox", checked, disabled: isDisabled, value, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }),
           React__namespace.default.createElement(
             "span",
-            { className: classNames__default.default("cweb-checkbox-icon-container ui-transition-colors", {
+            { className: classNames__default.default("cweb-checkbox-icon-container ui-transition-colors", "ui-h-6 ui-w-6", "sm:ui-h-4 sm:ui-w-4", {
               "ui-bg-primary": checked || indeterminate,
               "ui-bg-white": !checked && !indeterminate,
               "group-hover:ui-bg-blue-50": type === "regular" && !(checked || indeterminate),
               "group-hover:ui-bg-primary-dark": checked || indeterminate,
               "ui-outline-primary": isFocused
             }), "data-test-id": "checkbox-span" },
-            React__namespace.default.createElement("div", { className: "cweb-checkbox-icon" })
+            React__namespace.default.createElement("div", { className: "cweb-checkbox-icon ui-h-3 ui-w-3 sm:ui-h-2 sm:ui-w-2" })
           )
         ),
         React__namespace.default.createElement(
@@ -5778,14 +5898,38 @@ function TopBar(props) {
 }
 TopBar.Actions = Actions;
 
-function Card(props) {
-  const { as: Element = "div", title: _, actions: __, padding = true, children, className, elevation } = props, rest = __rest(props, ["as", "title", "actions", "padding", "children", "className", "elevation"]);
+const HoverIndicator = (props) => {
+  const { borderRadius = "xxs", children } = props;
+  const boxClasses = classNames__default.default("ui-relative ui-border ui-border-l-[16px] ui-border-transparent ui-border-l-transparent hover:ui-border-l-primary", "before:ui-absolute before:ui-inset-[-1px] before:-ui-ml-[15px] before:ui-w-[16px] hover:before:ui-bg-primary", { [`before:ui-radius-l-${borderRadius}`]: borderRadius });
   return React__namespace.default.createElement(
     Box,
-    Object.assign({ as: Element, elevation }, rest, { className: classNames__default.default("ui-overflow-hidden", "ui-rounded-lg ui-bg-white", className) }),
+    { borderRadius, className: boxClasses },
+    React__namespace.default.createElement(Box, { className: "-ui-ml-4" }, children)
+  );
+};
+
+function Card(props) {
+  const { actions: __, as: Element = "div", border, borderRadius = "xxs", children, className, elevation, elevationOnHover, indicatorOnHover, padding = true, title: _ } = props, rest = __rest(props, ["actions", "as", "border", "borderRadius", "children", "className", "elevation", "elevationOnHover", "indicatorOnHover", "padding", "title"]);
+  const cardContentClassName = classNames__default.default("ui-bg-white", {
+    "ui-ml-[16px]": indicatorOnHover
+  });
+  const hoverShadowClassName = createShadowClassName(elevationOnHover, {
+    modifier: "hover"
+  });
+  const CardContent = () => React__namespace.default.createElement(
+    Box,
+    { className: cardContentClassName },
     React__namespace.default.createElement(RenderTopBar, Object.assign({}, props)),
     padding ? React__namespace.default.createElement(Padding, null, children) : children
   );
+  const classes = classNames__default.default("ui-overflow-hidden", "ui-bg-white", className, hoverShadowClassName, {
+    "ui-border ui-border-slate-300 hover:ui-border-slate-400": border
+  });
+  return React__namespace.default.createElement(Box, Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes }), indicatorOnHover ? React__namespace.default.createElement(
+    HoverIndicator,
+    { borderRadius },
+    React__namespace.default.createElement(CardContent, null)
+  ) : React__namespace.default.createElement(CardContent, null));
 }
 Card.Title = (props) => React__namespace.default.createElement(Title, Object.assign({ type: "sm" }, props));
 Card.TopBar = TopBar;