@dbcdk/react-components 0.0.101 → 0.0.103

package/dist/index.js

@@ -405,7 +405,6 @@ var Button_default = {
   rounded: "Button_rounded",
   link: "Button_link",
   icon: "Button_icon",
-  xs: "Button_xs",
   sm: "Button_sm",
   lg: "Button_lg",
   fullWidth: "Button_fullWidth",
@@ -416,7 +415,8 @@ var Button_default = {
   active: "Button_active",
   success: "Button_success",
   danger: "Button_danger",
-  inline: "Button_inline"
+  inline: "Button_inline",
+  xs: "Button_xs"
 };
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -783,7 +783,8 @@ function Headline({
   icon,
   tone,
   variant,
-  allowWrap = true
+  allowWrap = true,
+  id
 }) {
   const Tag = `h${size}`;
   const containerClassName = [Headline_default.headlineContainer, tone ? Headline_default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
@@ -799,6 +800,7 @@ function Headline({
       /* @__PURE__ */ jsxs(
         Tag,
         {
+          id,
           style: {
             "--font-weight": weight,
             "--marker-color": severity ? SeverityBgColor[severity] : void 0
@@ -1333,6 +1335,48 @@ var InputContainer_default = {
   messageRow: "InputContainer_messageRow",
   inputContainer: "InputContainer_inputContainer"
 };
+
+// src/components/inline-status/InlineStatus.module.css
+var InlineStatus_default = {
+  container: "InlineStatus_container",
+  fullWidth: "InlineStatus_fullWidth",
+  leading: "InlineStatus_leading",
+  body: "InlineStatus_body",
+  sm: "InlineStatus_sm",
+  md: "InlineStatus_md",
+  neutral: "InlineStatus_neutral",
+  success: "InlineStatus_success",
+  warning: "InlineStatus_warning",
+  error: "InlineStatus_error",
+  info: "InlineStatus_info",
+  brand: "InlineStatus_brand"
+};
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        InlineStatus_default.container,
+        InlineStatus_default[severity],
+        InlineStatus_default[size],
+        fullWidth ? InlineStatus_default.fullWidth : "",
+        hasLeading ? InlineStatus_default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsx("span", { className: InlineStatus_default.body, children })
+      ]
+    }
+  );
+}
 function InputContainer({
   label,
   labelAction,
@@ -1348,8 +1392,6 @@ function InputContainer({
   labelWidth = "160px",
   modified = false
 }) {
-  const message = error != null ? error : helpText;
-  const messageClass = error ? InputContainer_default.errorText : InputContainer_default.helpText;
   const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${InputContainer_default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
     label && /* @__PURE__ */ jsxs("label", { className: InputContainer_default.label, htmlFor, children: [
       label,
@@ -1357,10 +1399,10 @@ function InputContainer({
     ] }),
     labelAction && /* @__PURE__ */ jsx("div", { className: InputContainer_default.labelAction, children: labelAction })
   ] });
-  const renderMessageRow = (message || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: `${messageClass} ${InputContainer_default.messageRow}`, children: [
-    /* @__PURE__ */ jsx("span", { children: message }),
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? InputContainer_default.errorText : InputContainer_default.helpText} ${InputContainer_default.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: helpText }),
     helpTextAddition && /* @__PURE__ */ jsx("span", { className: InputContainer_default.helpTextAddition, children: helpTextAddition })
-  ] });
+  ] }) });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -2510,7 +2552,7 @@ function Tabs({
       "div",
       {
         className: [Tabs_default.headerContainer, disableTopPadding ? Tabs_default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${Tabs_default.tabs} ${Tabs_default[variant]} ${panelStyle ? Tabs_default.panelStyle : ""}`, children: [
@@ -2732,6 +2774,7 @@ var Hyperlink_default = {
   primary: "Hyperlink_primary",
   block: "Hyperlink_block",
   content: "Hyperlink_content",
+  disabled: "Hyperlink_disabled",
   icon: "Hyperlink_icon"
 };
 function cx2(...parts) {
@@ -2753,13 +2796,15 @@ function Hyperlink(props) {
     as = "a",
     variant = "primary",
     inline = true,
+    disabled = false,
     ...rest
   } = props;
   const linkClassName = cx2(
     Hyperlink_default.link,
     className,
     variant === "secondary" ? Hyperlink_default.secondary : Hyperlink_default.primary,
-    inline ? "" : Hyperlink_default.block
+    inline ? "" : Hyperlink_default.block,
+    disabled ? Hyperlink_default.disabled : ""
   );
   if (asChild) {
     const child = React19.Children.only(children);
@@ -2772,6 +2817,7 @@ function Hyperlink(props) {
       ...rest,
       className: cx2(childProps.className, linkClassName),
       children: renderInner(childProps.children, icon),
+      "aria-disabled": disabled || void 0,
       onClick: (e) => {
         e.stopPropagation();
         if (childProps.onClick) {
@@ -2786,6 +2832,7 @@ function Hyperlink(props) {
       {
         type: "button",
         className: linkClassName,
+        disabled,
         ...rest,
         children: renderInner(children, icon)
       }
@@ -2794,8 +2841,12 @@ function Hyperlink(props) {
   return /* @__PURE__ */ jsx(
     "a",
     {
-      onClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (disabled) e.preventDefault();
+      },
       className: linkClassName,
+      "aria-disabled": disabled || void 0,
       ...rest,
       children: renderInner(children, icon)
     }
@@ -3428,6 +3479,10 @@ function Panel({
 var Card_default = {
   outerContainer: "Card_outerContainer",
   container: "Card_container",
+  elevationNone: "Card_elevationNone",
+  elevationXs: "Card_elevationXs",
+  elevationSm: "Card_elevationSm",
+  elevationMd: "Card_elevationMd",
   variantDefault: "Card_variantDefault",
   variantSubtle: "Card_variantSubtle",
   sm: "Card_sm",
@@ -3555,6 +3610,7 @@ function CardImpl({
   loading = false,
   variant = "default",
   size = "md",
+  elevation = "sm",
   headerMarker = true,
   headerIcon,
   headerAddition,
@@ -3571,6 +3627,7 @@ function CardImpl({
   width,
   headlineSize = 4
 }) {
+  var _a;
   const outerStyle = width ? {
     ["--width"]: `${width}%`,
     ["--gap-share"]: getGapShare(width)
@@ -3578,6 +3635,7 @@ function CardImpl({
   const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
   const innerPlacementClass = getInnerPlacementClass(imgPlacement, Card_default);
   const variantClass = getVariantClass(variant, Card_default);
+  const elevationClass = (_a = Card_default[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : Card_default.elevationSm;
   const hasHeader = !!title || !!headerMeta;
   const showSection = !loading && (showSectionDivider || !!sectionTitle);
   const showBody = !loading && !!children;
@@ -3615,7 +3673,7 @@ function CardImpl({
     ] })
   ] });
   const cardContent = link ? /* @__PURE__ */ jsx(Hyperlink, { children: link }) : inner;
-  return /* @__PURE__ */ jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${Card_default.container} ${variantClass}`, children: cardContent }) });
+  return /* @__PURE__ */ jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${Card_default.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
 }
 var Card = Object.assign(CardImpl, {
   Meta: CardMeta,
@@ -3662,7 +3720,7 @@ var Page_default = {
   headerMain: "Page_headerMain",
   content: "Page_content",
   contentLoading: "Page_contentLoading",
-  disableContentBox: "Page_disableContentBox"
+  contentBox: "Page_contentBox"
 };
 
 // src/components/breadcrumbs/Breadcrumbs.module.css
@@ -3689,12 +3747,14 @@ function Page({
   headerAddition,
   breadcrumbs,
   disableContentBox,
+  contentBox = false,
   disableTopPadding = true,
   maxWidth,
   containScrolling = false,
   children,
   loading = false
 }) {
+  const showContentBox = contentBox && !disableContentBox;
   const maxWidthClass = maxWidth ? Page_default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
   const hasHeadline = Boolean(header || subheader || headerAddition);
   return /* @__PURE__ */ jsxs(
@@ -3708,7 +3768,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 2,
+              size: 1,
               severity,
               icon: headerIcon,
               subheader,
@@ -3720,7 +3780,7 @@ function Page({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${disableContentBox ? Page_default.disableContentBox : ""}`,
+            className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${showContentBox ? Page_default.contentBox : ""}`,
             children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
           }
         )
@@ -4292,7 +4352,7 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          const allowOverflow = column.allowOverflow;
+          column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsx(
             "td",
@@ -4312,7 +4372,7 @@ function TableRow({
                   className: Table_default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: allowWrap || allowOverflow ? cellValue : /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
                 }
               )
             },
@@ -7545,6 +7605,14 @@ var SegmentedProgressBar_default = {
   progressCenterLabel: "SegmentedProgressBar_progressCenterLabel",
   emptySegments: "SegmentedProgressBar_emptySegments"
 };
+var sizeTokenMap = {
+  "2xs": "var(--component-size-2xs)",
+  xxs: "var(--component-size-xxs)",
+  xs: "var(--component-size-xs)",
+  sm: "var(--component-size-sm)",
+  md: "var(--component-size-md)",
+  lg: "var(--component-size-lg)"
+};
 function SegmentWithTooltip({
   seg,
   index,
@@ -7584,9 +7652,9 @@ var SegmentedProgressBar = ({
   segments,
   total,
   showRemainder = true,
-  remainderSeverity = "neutral",
+  remainderSeverity = "missing",
   centerLabel,
-  height,
+  size = "sm",
   rounded = true,
   trackColor,
   tooltipPlacement = "top",
@@ -7624,7 +7692,8 @@ var SegmentedProgressBar = ({
           className: SegmentedProgressBar_default.progressBar,
           "data-rounded": rounded ? "true" : "false",
           style: {
-            height: height ? `${height}px` : "24px",
+            ["--progress-height"]: sizeTokenMap[size],
+            height: sizeTokenMap[size],
             background: trackColor != null ? trackColor : "var(--color-bg-surface-subtle)"
           },
           children: [
@@ -8505,7 +8574,7 @@ function Modal({
         tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs("div", { className: Modal_default.header, children: [
-            header && /* @__PURE__ */ jsx(Headline, { severity, size: 3, disableMargin: true, subheader, children: header }),
+            header && /* @__PURE__ */ jsx(Headline, { severity, size: 2, disableMargin: true, subheader, children: header }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -10668,7 +10737,7 @@ function SidePanel({
                 /* @__PURE__ */ jsx(
                   Headline,
                   {
-                    size: 3,
+                    size: 2,
                     disableMargin: true,
                     severity,
                     marker: showHeaderMarker,
@@ -11028,6 +11097,7 @@ function IntervalSelect({
 // src/components/accordion/Accordion.module.css
 var Accordion_default = {
   container: "Accordion_container",
+  outlined: "Accordion_outlined",
   sm: "Accordion_sm",
   md: "Accordion_md",
   lg: "Accordion_lg"
@@ -11044,7 +11114,8 @@ var AccordionRow_default = {
   panel: "AccordionRow_panel",
   animate: "AccordionRow_animate",
   noAnimate: "AccordionRow_noAnimate",
-  content: "AccordionRow_content"
+  content: "AccordionRow_content",
+  item: "AccordionRow_item"
 };
 function useCollapsibleHeight(isOpen, shouldAnimate) {
   const innerRef = useRef(null);
@@ -11087,7 +11158,9 @@ function AccordionRow({
   item,
   isOpen,
   onToggle,
-  shouldAnimate = true
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default"
 }) {
   const isDisabled = !!item.disabled;
   const buttonId = `${uid}-acc-btn-${index}`;
@@ -11115,8 +11188,8 @@ function AccordionRow({
                   Headline,
                   {
                     disableMargin: true,
-                    size: 4,
-                    weight: 500,
+                    size: headlineSize,
+                    weight: variant === "outlined" ? 400 : 500,
                     severity: item.severity,
                     subheader: item.subheader,
                     allowWrap: isOpen,
@@ -11155,6 +11228,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
+  variant = "default",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
@@ -11164,9 +11238,9 @@ function Accordion({
 }) {
   const uid = useId();
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
-  const hasMountedRef = useRef(false);
+  const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
-    hasMountedRef.current = true;
+    setHasMounted(true);
   }, []);
   const [internalSingle, setInternalSingle] = useState(
     mode === "single" ? defaultOpenIndex : null
@@ -11212,18 +11286,26 @@ function Accordion({
     if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
     else commit([...currentOpenIndexes, index]);
   }
-  return /* @__PURE__ */ jsx("div", { className: `${Accordion_default.container} ${Accordion_default[size]}`, children: items.map((item, i) => /* @__PURE__ */ jsx(
-    AccordionRow,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      uid,
-      index: i,
-      item,
-      isOpen: openSet.has(i),
-      onToggle: toggle,
-      shouldAnimate: hasMountedRef.current
-    },
-    i
-  )) });
+      className: [Accordion_default.container, Accordion_default[size], variant !== "default" ? Accordion_default[variant] : ""].filter(Boolean).join(" "),
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        AccordionRow,
+        {
+          uid,
+          index: i,
+          item,
+          isOpen: openSet.has(i),
+          onToggle: toggle,
+          shouldAnimate: hasMounted,
+          headlineSize: size === "sm" ? 4 : 3,
+          variant
+        },
+        i
+      ))
+    }
+  );
 }
 var EmptyIllustration = () => /* @__PURE__ */ jsxs(
   "svg",
@@ -12724,4 +12806,4 @@ function Alert({
   );
 }
 
-export { Accordion, Alert, AppHeader, AttributeChip, Avatar, Breadcrumbs, Button, ButtonSelect, Card, CardContainer, ChartSemanticColorVar, Checkbox, CheckboxGroup, Chip, ChipMultiToggle, Circle, CodeBlock, CollapsibleHeadline, CopyButton, DateTimePicker, Divider, FadeOverlay, FilterField, Footer, Grid, GridItem, Headline, Hyperlink, Icon, Input, InputContainer, IntervalSelect, JsonViewer, Menu, MetaBar, Modal, ModalProvider, MultiSelect, NUMBER_OPERATORS, NavBar, Page, PageLayout, Pagination, Panel, Popover, RadioButton, RadioButtonGroup, SearchBox, SegmentedProgressBar, Select, SeverityIcon, SidePanel, Sidebar, SkeletonLoader, SkeletonLoaderItem, SplitButton, SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary, Stack, StatePage, StickyFooterLayout, Table, Tabs, Textarea, ThemeButton, ThemeMenuSection, Toast, ToastProvider, Tooltip, TooltipContext, TooltipProvider, Typeahead, UserDisplay, formatDate, nestedFiltering, useDeviceSize, useModal, useOptionalToast, usePagination, useSidePanel, useSorting, useTableData, useTableSelection, useTheme, useTimeDuration, useToast, useTooltipTrigger, useViewportFill };
+export { Accordion, Alert, AppHeader, AttributeChip, Avatar, Breadcrumbs, Button, ButtonSelect, Card, CardContainer, ChartSemanticColorVar, Checkbox, CheckboxGroup, Chip, ChipMultiToggle, Circle, CodeBlock, CollapsibleHeadline, CopyButton, DateTimePicker, Divider, FadeOverlay, FilterField, Footer, Grid, GridItem, Headline, Hyperlink, Icon, InlineStatus, Input, InputContainer, IntervalSelect, JsonViewer, Menu, MetaBar, Modal, ModalProvider, MultiSelect, NUMBER_OPERATORS, NavBar, Page, PageLayout, Pagination, Panel, Popover, RadioButton, RadioButtonGroup, SearchBox, SegmentedProgressBar, Select, SeverityIcon, SidePanel, Sidebar, SkeletonLoader, SkeletonLoaderItem, SplitButton, SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary, Stack, StatePage, StickyFooterLayout, Table, Tabs, Textarea, ThemeButton, ThemeMenuSection, Toast, ToastProvider, Tooltip, TooltipContext, TooltipProvider, Typeahead, UserDisplay, formatDate, nestedFiltering, useDeviceSize, useModal, useOptionalToast, usePagination, useSidePanel, useSorting, useTableData, useTableSelection, useTheme, useTimeDuration, useToast, useTooltipTrigger, useViewportFill };

package/dist/styles/styles.css

@@ -42,15 +42,15 @@ body {
 }
 
 h1 {
-  font-size: var(--font-size-2xl);
+  font-size: var(--font-size-xl);
 }
 
 h2 {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-lg);
 }
 
 h3 {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
 }
 
 h4 {
@@ -240,6 +240,10 @@ body.dbc-app {
   font-size: var(--font-size-xs);
 }
 
+.dbc-md-text {
+  font-size: var(--font-size-md);
+}
+
 .dbc-lg-text {
   font-size: var(--font-size-lg);
 }

package/dist/styles/themes/dbc/colors.css

@@ -126,22 +126,22 @@ html {
   /* Status */
   --color-status-success: var(--dbc-green-500);
   --color-status-success-bg: var(--dbc-green-100);
-  --color-status-success-border: var(--dbc-green-300);
+  --color-status-success-border: color-mix(in srgb, var(--dbc-green-500) 24%, transparent);
   --color-status-success-fg: var(--dbc-green-700);
 
   --color-status-warning: var(--dbc-amber-700);
   --color-status-warning-bg: var(--dbc-amber-100);
-  --color-status-warning-border: var(--dbc-amber-400);
+  --color-status-warning-border: color-mix(in srgb, var(--dbc-amber-700) 24%, transparent);
   --color-status-warning-fg: var(--dbc-amber-800);
 
   --color-status-error: var(--dbc-red-600);
   --color-status-error-bg: var(--dbc-red-100);
-  --color-status-error-border: var(--dbc-red-300);
+  --color-status-error-border: color-mix(in srgb, var(--dbc-red-600) 24%, transparent);
   --color-status-error-fg: var(--dbc-red-800);
 
   --color-status-info: var(--dbc-info-500);
   --color-status-info-bg: var(--dbc-info-100);
-  --color-status-info-border: var(--dbc-info-300);
+  --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
   --color-status-info-fg: var(--dbc-info-700);
 
   /* Chart colors */
@@ -223,11 +223,16 @@ html {
   --opac-bg-dark-invert: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
 
   /* Shadows */
-  --shadow-xs: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
-  --shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24));
-  --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
-  --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
-  --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
+
+  --shadow-xs: 0 1px 1px light-dark(rgba(0, 0, 0, 0.04), transparent);
+
+  --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), transparent);
+
+  --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), transparent);
+
+  --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
+
+  --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));
 
   /* Skeletons */
   --skeleton-base: light-dark(#e5e7eb, #374151);

package/dist/styles.css

@@ -42,15 +42,15 @@ body {
 }
 
 h1 {
-  font-size: var(--font-size-2xl);
+  font-size: var(--font-size-xl);
 }
 
 h2 {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-lg);
 }
 
 h3 {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
 }
 
 h4 {
@@ -240,6 +240,10 @@ body.dbc-app {
   font-size: var(--font-size-xs);
 }
 
+.dbc-md-text {
+  font-size: var(--font-size-md);
+}
+
 .dbc-lg-text {
   font-size: var(--font-size-lg);
 }

package/dist/tanstack.cjs

@@ -171,7 +171,6 @@ var Button_default = {
   rounded: "Button_rounded2",
   link: "Button_link2",
   icon: "Button_icon2",
-  xs: "Button_xs2",
   sm: "Button_sm2",
   lg: "Button_lg2",
   fullWidth: "Button_fullWidth2",
@@ -182,7 +181,8 @@ var Button_default = {
   active: "Button_active2",
   success: "Button_success2",
   danger: "Button_danger2",
-  inline: "Button_inline2"
+  inline: "Button_inline2",
+  xs: "Button_xs2"
 };
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -342,6 +342,73 @@ var InputContainer_default = {
   messageRow: "InputContainer_messageRow2",
   inputContainer: "InputContainer_inputContainer2"
 };
+
+// src/components/inline-status/InlineStatus.module.css
+var InlineStatus_default = {
+  container: "InlineStatus_container2",
+  fullWidth: "InlineStatus_fullWidth2",
+  leading: "InlineStatus_leading2",
+  body: "InlineStatus_body2",
+  sm: "InlineStatus_sm2",
+  md: "InlineStatus_md2",
+  neutral: "InlineStatus_neutral2",
+  success: "InlineStatus_success2",
+  warning: "InlineStatus_warning2",
+  error: "InlineStatus_error2",
+  info: "InlineStatus_info2",
+  brand: "InlineStatus_brand2"
+};
+
+// src/components/icon/Icon.module.css
+var Icon_default = {
+  container: "Icon_container2",
+  icon: "Icon_icon2",
+  success: "Icon_success2",
+  error: "Icon_error2",
+  warning: "Icon_warning2",
+  info: "Icon_info2",
+  brand: "Icon_brand2"
+};
+var SeverityIcon = {
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
+  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
+};
+function Icon({ severity, label, customIcon }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${Icon_default.container}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${Icon_default.icon} ${severity ? Icon_default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] });
+}
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        InlineStatus_default.container,
+        InlineStatus_default[severity],
+        InlineStatus_default[size],
+        fullWidth ? InlineStatus_default.fullWidth : "",
+        hasLeading ? InlineStatus_default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.body, children })
+      ]
+    }
+  );
+}
 function InputContainer({
   label,
   labelAction,
@@ -357,8 +424,6 @@ function InputContainer({
   labelWidth = "160px",
   modified = false
 }) {
-  const message = error != null ? error : helpText;
-  const messageClass = error ? InputContainer_default.errorText : InputContainer_default.helpText;
   const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${InputContainer_default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: InputContainer_default.label, htmlFor, children: [
       label,
@@ -366,10 +431,10 @@ function InputContainer({
     ] }),
     labelAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: InputContainer_default.labelAction, children: labelAction })
   ] });
-  const renderMessageRow = (message || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${messageClass} ${InputContainer_default.messageRow}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? InputContainer_default.errorText : InputContainer_default.helpText} ${InputContainer_default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
     helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: InputContainer_default.helpTextAddition, children: helpTextAddition })
-  ] });
+  ] }) });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1658,7 +1723,7 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          const allowOverflow = column.allowOverflow;
+          column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
@@ -1678,7 +1743,7 @@ function TableRow({
                   className: Table_default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: allowWrap || allowOverflow ? cellValue : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
                 }
               )
             },