@dbcdk/react-components 0.0.172 → 0.0.174

package/dist/client.cjs

@@ -18,6 +18,7 @@ var EnvironmentBanner = require('./components/environment-banner/EnvironmentBann
 var Footer = require('./components/page-layout/components/footer/Footer');
 var Input = require('./components/forms/input/Input');
 var SearchBox = require('./components/search-box/SearchBox');
+var useColorScheme = require('./hooks/useColorScheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
 var Chip = require('./components/chip/Chip');
@@ -80,6 +81,7 @@ var StatePage = require('./components/state-page/StatePage');
 var StickyFooterLayout = require('./components/sticky-footer-layout/StickyFooterLayout');
 var Typeahead = require('./components/forms/typeahead/Typeahead');
 var useDeviceSize = require('./hooks/useDeviceSize');
+var ColorSchemeButton = require('./components/color-scheme-button/ColorSchemeButton');
 var ThemeButton = require('./components/theme-button/ThemeButton');
 var CopyButton = require('./components/copy-button/CopyButton');
 var Divider = require('./components/divider/Divider');
@@ -195,6 +197,12 @@ Object.keys(SearchBox).forEach(function (k) {
 		get: function () { return SearchBox[k]; }
 	});
 });
+Object.keys(useColorScheme).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useColorScheme[k]; }
+	});
+});
 Object.keys(useTheme).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -567,6 +575,12 @@ Object.keys(useDeviceSize).forEach(function (k) {
 		get: function () { return useDeviceSize[k]; }
 	});
 });
+Object.keys(ColorSchemeButton).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ColorSchemeButton[k]; }
+	});
+});
 Object.keys(ThemeButton).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -15,6 +15,7 @@ export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
+export * from './hooks/useColorScheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
@@ -77,6 +78,7 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/color-scheme-button/ColorSchemeButton';
 export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';

package/dist/client.js

@@ -16,6 +16,7 @@ export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
+export * from './hooks/useColorScheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
@@ -78,6 +79,7 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/color-scheme-button/ColorSchemeButton';
 export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';

package/dist/components/app-header/AppHeader.module.css

@@ -1,6 +1,6 @@
 .header {
   inline-size: 100%;
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-navbar-bg);
 }
 
 .container {
@@ -16,7 +16,7 @@
   box-sizing: border-box;
 
   /* chrome */
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
 
   /* density-aware vertical rhythm */
   padding-block: calc(var(--control-padding-y) + var(--density));

package/dist/components/button/Button.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { Size } from '../../types/sizes.types';
-export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger'
+/** Ghost button using --color-navbar-fg tokens — only meaningful inside/near AppHeader */
+ | 'header';
 export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;

package/dist/components/button/Button.module.css

@@ -252,6 +252,32 @@
   color: var(--button-bg-primary-hover);
 }
 
+.header {
+  background-color: transparent;
+  color: var(--color-navbar-fg);
+  border-color: var(--color-navbar-border);
+}
+
+.header:hover {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
+}
+
+.header:focus-visible {
+  outline: none;
+  border-color: var(--color-navbar-fg);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
+}
+
+.header.active {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
+  color: var(--color-navbar-fg);
+  border-color: var(--color-navbar-fg);
+}
+
+.header.active:hover {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 22%, transparent);
+}
+
 .button.xs {
   height: auto;
   min-block-size: 0;

package/dist/components/color-scheme-button/ColorSchemeButton.cjs

@@ -0,0 +1,78 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Button = require('../../components/button/Button');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var useColorScheme = require('../../hooks/useColorScheme');
+
+const COLOR_SCHEME_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { size: 16 }) },
+  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 16 }) },
+  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { size: 16 }) }
+];
+function ColorSchemeMenuSection() {
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
+    COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.RadioItem,
+      {
+        name: "color-scheme",
+        value: option.value,
+        checked: colorScheme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchColorScheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ColorSchemeButton({
+  size,
+  variant = "outlined"
+}) {
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "140px",
+      trigger: (handleClick, chevron) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          variant,
+          size,
+          onClick: handleClick,
+          "aria-label": "Skift udseende",
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
+            chevron
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
+        COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: colorScheme === option.value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchColorScheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+exports.ColorSchemeButton = ColorSchemeButton;
+exports.ColorSchemeMenuSection = ColorSchemeMenuSection;

package/dist/components/color-scheme-button/ColorSchemeButton.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
+export interface ColorSchemeButtonProps {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+export declare function ColorSchemeMenuSection(): JSX.Element;
+export declare function ColorSchemeButton({ size, variant, }: ColorSchemeButtonProps): JSX.Element;

package/dist/components/color-scheme-button/ColorSchemeButton.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Palette, Monitor, Sun, Moon } from 'lucide-react';
+import { Button } from '../../components/button/Button';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { useColorScheme } from '../../hooks/useColorScheme';
+
+const COLOR_SCHEME_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsx(Monitor, { size: 16 }) },
+  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsx(Sun, { size: 16 }) },
+  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsx(Moon, { size: 16 }) }
+];
+function ColorSchemeMenuSection() {
+  const { colorScheme, switchColorScheme } = useColorScheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
+    COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      Menu.RadioItem,
+      {
+        name: "color-scheme",
+        value: option.value,
+        checked: colorScheme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchColorScheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ColorSchemeButton({
+  size,
+  variant = "outlined"
+}) {
+  const { colorScheme, switchColorScheme } = useColorScheme();
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "140px",
+      trigger: (handleClick, chevron) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant,
+          size,
+          onClick: handleClick,
+          "aria-label": "Skift udseende",
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsx(Palette, {}),
+            chevron
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+        /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
+        COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: colorScheme === option.value, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchColorScheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+export { ColorSchemeButton, ColorSchemeMenuSection };

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -10,7 +10,7 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
     onChange: (value: T) => void;
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
-    variant?: 'outlined' | 'filled' | 'standalone';
+    variant?: 'outlined' | 'filled' | 'standalone' | 'header';
     onClear?: () => void;
     /**
      * Needed if T is an object and you want to use native select.

package/dist/components/forms/form-select/FormSelect.module.css

@@ -129,6 +129,25 @@
   background-color: transparent;
 }
 
+/* Ghost field for use inside/near AppHeader — only meaningful there */
+.header {
+  background-color: transparent;
+  border-color: var(--color-navbar-border);
+  color: var(--color-navbar-fg);
+}
+
+.header:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+}
+
+.container:focus-within .header {
+  border-color: var(--color-navbar-fg);
+}
+
+.field:has(.header) .chevron {
+  color: var(--color-navbar-fg-muted);
+}
+
 /* =========================================
    Sizes
    ========================================= */

package/dist/components/forms/input/Input.cjs

@@ -87,7 +87,7 @@ const Input = react.forwardRef(function Input2({
     focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
     closeOnPointerDown: false
   });
-  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  const trailingButtonVariant = variant === "header" ? "header" : variant === "outlined" || variant === "standalone" ? "outlined" : "default";
   return /* @__PURE__ */ jsxRuntime.jsx(
     InputContainer.InputContainer,
     {

package/dist/components/forms/input/Input.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Size } from '../../../types/sizes.types';
 import type { InputContainerProps } from '../input-container/InputContainer';
-export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded';
+export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded' | 'header';
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
     icon?: React.ReactNode;
     autoFocus?: boolean;

package/dist/components/forms/input/Input.js

@@ -81,7 +81,7 @@ const Input = forwardRef(function Input2({
     focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
     closeOnPointerDown: false
   });
-  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  const trailingButtonVariant = variant === "header" ? "header" : variant === "outlined" || variant === "standalone" ? "outlined" : "default";
   return /* @__PURE__ */ jsx(
     InputContainer,
     {

package/dist/components/forms/input/Input.module.css

@@ -183,6 +183,38 @@
     inset 0 0 0 1px var(--color-border-selected);
 }
 
+/* Ghost field for use inside/near AppHeader — only meaningful there */
+.header {
+  background-color: transparent;
+  border-color: var(--color-navbar-border);
+  color: var(--color-navbar-fg);
+}
+
+.header:hover:not([aria-disabled='true']) {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+}
+
+.header:focus-within:not([aria-disabled='true']) {
+  border-color: var(--color-navbar-fg);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
+}
+
+.header .input {
+  color: var(--color-navbar-fg);
+}
+
+.header .input::placeholder {
+  color: var(--color-navbar-fg-muted) !important;
+}
+
+.header .icon {
+  color: var(--color-navbar-fg-muted);
+}
+
+.header:focus-within .icon {
+  color: var(--color-navbar-fg);
+}
+
 /* =========================
    Modified state
    ========================= */

package/dist/components/forms/typeahead/Typeahead.cjs

@@ -635,6 +635,7 @@ function Typeahead({
           Popover.Popover,
           {
             open,
+            variant: variant === "header" ? "header" : "default",
             minWidth: popoverWidth != null ? popoverWidth : minWidth,
             matchTriggerWidth: true,
             fillTrigger: true,

package/dist/components/forms/typeahead/Typeahead.js

@@ -611,6 +611,7 @@ function Typeahead({
           Popover,
           {
             open,
+            variant: variant === "header" ? "header" : "default",
             minWidth: popoverWidth != null ? popoverWidth : minWidth,
             matchTriggerWidth: true,
             fillTrigger: true,

package/dist/components/grid/Grid.cjs

@@ -39,14 +39,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: [styles__default.default.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.d.ts

@@ -17,11 +17,11 @@ export interface GridProps {
 export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
-    /** Default span: <768px */
+    /** Default span: <768px. Supports 0.5 increments, e.g. 4.5 */
     base?: number;
-    /** Medium span: ≥768px */
+    /** Medium span: ≥768px. Supports 0.5 increments, e.g. 4.5 */
     md?: number;
-    /** Large span: ≥1200px */
+    /** Large span: ≥1200px. Supports 0.5 increments, e.g. 4.5 */
     lg?: number;
     className?: string;
     style?: CSSProperties;

package/dist/components/grid/Grid.js

@@ -33,14 +33,15 @@ function Grid({
   );
 }
 function GridItem({ children, base = 12, md, lg, className, style }) {
+  const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: [styles.item, className].filter(Boolean).join(" "),
       style: {
-        "--span-base": base,
-        ...md != null ? { "--span-md": md } : {},
-        ...lg != null ? { "--span-lg": lg } : {},
+        "--span-base": toTrackSpan(base),
+        ...md != null ? { "--span-md": toTrackSpan(md) } : {},
+        ...lg != null ? { "--span-lg": toTrackSpan(lg) } : {},
         ...style
       },
       children

package/dist/components/grid/Grid.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-columns: repeat(24, minmax(0, 1fr));
   align-items: start;
   max-width: var(--max-width-base);
 }

package/dist/components/hyperlink/Hyperlink.cjs

@@ -56,10 +56,11 @@ function Hyperlink(props) {
     disabled = false,
     ...rest
   } = props;
+  const variantClassName = variant === "secondary" ? styles__default.default.secondary : variant === "header" ? styles__default.default.header : styles__default.default.primary;
   const linkClassName = cx(
     styles__default.default.link,
     className,
-    variant === "secondary" ? styles__default.default.secondary : styles__default.default.primary,
+    variantClassName,
     inline ? "" : styles__default.default.block,
     disabled ? styles__default.default.disabled : ""
   );

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -9,7 +9,8 @@ type BaseProps = {
      * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
      */
     asChild?: boolean;
-    variant?: 'primary' | 'secondary';
+    /** 'header' uses --color-navbar-fg tokens — only meaningful when rendered inside/near AppHeader */
+    variant?: 'primary' | 'secondary' | 'header';
     inline?: boolean;
     disabled?: boolean;
 };

package/dist/components/hyperlink/Hyperlink.js

@@ -31,10 +31,11 @@ function Hyperlink(props) {
     disabled = false,
     ...rest
   } = props;
+  const variantClassName = variant === "secondary" ? styles.secondary : variant === "header" ? styles.header : styles.primary;
   const linkClassName = cx(
     styles.link,
     className,
-    variant === "secondary" ? styles.secondary : styles.primary,
+    variantClassName,
     inline ? "" : styles.block,
     disabled ? styles.disabled : ""
   );

package/dist/components/hyperlink/Hyperlink.module.css

@@ -23,6 +23,22 @@
   color: var(--color-fg-default);
 }
 
+.link.header {
+  color: var(--color-navbar-fg-muted);
+}
+
+.link.header:hover {
+  color: var(--color-navbar-fg);
+}
+
+.link.header:active {
+  color: var(--color-navbar-fg);
+}
+
+.link.header:focus-visible {
+  outline-color: var(--color-navbar-fg);
+}
+
 .link:hover {
   color: var(--color-brand);
 }

package/dist/components/metric-tile/MetricTile.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var client = require('../../client');
 var styles = require('./MetricTile.module.css');
 
@@ -11,23 +12,91 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function toSize(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
-function MetricTile({
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t.__METRIC_TILE_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const MetricTileValue = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileValue.__METRIC_TILE_SLOT__ = "Value";
+MetricTileValue.displayName = "MetricTile.Value";
+const MetricTileAdornment = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+MetricTileAdornment.__METRIC_TILE_SLOT__ = "Adornment";
+MetricTileAdornment.displayName = "MetricTile.Adornment";
+const MetricTileBase = ({
   severity,
   label,
+  icon,
   value,
   tooltip,
   size = "md",
+  variant = "filled",
   minWidth,
-  maxWidth
-}) {
+  maxWidth,
+  secondaryLabel,
+  secondaryValue,
+  children
+}) => {
+  var _a, _b, _c;
   const style = minWidth != null || maxWidth != null ? {
     ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
     ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
   } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })
-  ] }) });
-}
+  const { slots } = splitSlots(children);
+  const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
+  const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
+  const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: styles__default.default.tile,
+      "data-severity": severity,
+      "data-size": size,
+      "data-variant": variant,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.labelRow, children: [
+          icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+        ] }),
+        showValueRow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.valueRow, children: [
+          resolvedValue != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: resolvedValue }) : null,
+          resolvedAdornment != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.adornment, children: resolvedAdornment }) : null
+        ] }) : null,
+        secondaryLabel != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.secondary, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryLabel, children: secondaryLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.secondaryValue, children: secondaryValue })
+        ] })
+      ]
+    }
+  ) });
+};
+const MetricTile = Object.assign(MetricTileBase, {
+  Value: MetricTileValue,
+  Adornment: MetricTileAdornment
+});
 
 exports.MetricTile = MetricTile;