@dbcdk/react-components 0.0.102 → 0.0.103

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

@@ -10,6 +10,7 @@ type BaseProps = {
     asChild?: boolean;
     variant?: 'primary' | 'secondary';
     inline?: boolean;
+    disabled?: boolean;
 };
 type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     as?: 'a';

package/dist/index.cjs

@@ -1356,6 +1356,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__ */ 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,
@@ -1371,8 +1413,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,
@@ -1380,10 +1420,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",
@@ -2755,6 +2795,7 @@ var Hyperlink_default = {
   primary: "Hyperlink_primary",
   block: "Hyperlink_block",
   content: "Hyperlink_content",
+  disabled: "Hyperlink_disabled",
   icon: "Hyperlink_icon"
 };
 function cx2(...parts) {
@@ -2776,13 +2817,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__namespace.Children.only(children);
@@ -2795,6 +2838,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) {
@@ -2809,6 +2853,7 @@ function Hyperlink(props) {
       {
         type: "button",
         className: linkClassName,
+        disabled,
         ...rest,
         children: renderInner(children, icon)
       }
@@ -2817,8 +2862,12 @@ function Hyperlink(props) {
   return /* @__PURE__ */ jsxRuntime.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)
     }
@@ -12778,48 +12827,6 @@ function Alert({
   );
 }
 
-// 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__ */ 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 })
-      ]
-    }
-  );
-}
-
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AppHeader = AppHeader;

package/dist/index.css

@@ -171,12 +171,16 @@
 .Button_button:disabled,
 .Button_button[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -1214,6 +1218,85 @@
   border-radius: var(--border-radius-default);
 }
 
+/* src/components/inline-status/InlineStatus.module.css */
+.InlineStatus_container {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+.InlineStatus_fullWidth {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+.InlineStatus_leading svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+.InlineStatus_warning {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+.InlineStatus_error {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+.InlineStatus_info {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+.InlineStatus_brand {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
 .RadioButtons_container {
   display: inline-flex;
@@ -2026,6 +2109,17 @@
   outline: 2px solid var(--color-brand);
   outline-offset: 2px;
 }
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true]) {
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true]):hover {
+  color: var(--color-disabled-fg);
+}
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true])::after {
+  display: none;
+}
 .Hyperlink_icon {
   display: flex;
   align-items: center;
@@ -2801,7 +2895,7 @@
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-lg) 0;
-  padding-block-end: var(--spacing-xl);
+  padding-block-end: var(--spacing-lg);
   gap: var(--spacing-md);
   min-width: 0;
   flex: 0 0 auto;
@@ -5878,85 +5972,6 @@
   --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
 
-/* src/components/inline-status/InlineStatus.module.css */
-.InlineStatus_container {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: var(--color-border-subtle);
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
-  max-inline-size: 100%;
-  padding: var(--spacing-2xs) var(--spacing-sm);
-  border: 1px solid var(--inline-status-border);
-  border-radius: var(--border-radius-default);
-  background: var(--inline-status-bg);
-  color: var(--inline-status-fg);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-default);
-  line-height: var(--line-height-normal);
-  box-sizing: border-box;
-}
-.InlineStatus_fullWidth {
-  display: flex;
-  inline-size: 100%;
-}
-.InlineStatus_leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding-block-start: 1px;
-}
-.InlineStatus_leading svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: currentColor;
-}
-.InlineStatus_body {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-.InlineStatus_sm {
-  font-size: var(--font-size-xs);
-}
-.InlineStatus_md {
-  font-size: var(--font-size-sm);
-}
-.InlineStatus_neutral {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: transparent;
-}
-.InlineStatus_success {
-  --inline-status-bg: var(--color-status-success-bg);
-  --inline-status-fg: var(--color-status-success-fg);
-  --inline-status-border: var(--color-status-success-border);
-}
-.InlineStatus_warning {
-  --inline-status-bg: var(--color-status-warning-bg);
-  --inline-status-fg: var(--color-status-warning-fg);
-  --inline-status-border: var(--color-status-warning-border);
-}
-.InlineStatus_error {
-  --inline-status-bg: var(--color-status-error-bg);
-  --inline-status-fg: var(--color-status-error-fg);
-  --inline-status-border: var(--color-status-error-border);
-}
-.InlineStatus_info {
-  --inline-status-bg: var(--color-status-info-bg);
-  --inline-status-fg: var(--color-status-info-fg);
-  --inline-status-border: var(--color-status-info-border);
-}
-.InlineStatus_brand {
-  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --inline-status-fg: var(--color-brand);
-  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
-}
-
 /* src/components/table/components/column-resizer/ColumnResizer.module.css */
 .ColumnResizer_resizer {
   position: absolute;
@@ -6127,12 +6142,16 @@
 .Button_button2:disabled,
 .Button_button2[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button2:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link2 {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -6591,6 +6610,116 @@
   border-radius: var(--border-radius-default);
 }
 
+/* src/components/inline-status/InlineStatus.module.css */
+.InlineStatus_container2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+.InlineStatus_fullWidth2 {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+.InlineStatus_leading2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm2 {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md2 {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success2 {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+.InlineStatus_warning2 {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+.InlineStatus_error2 {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+.InlineStatus_info2 {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+.InlineStatus_brand2 {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
+/* src/components/icon/Icon.module.css */
+.Icon_container2 {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+}
+.Icon_icon2 {
+  display: flex;
+}
+.Icon_icon2 svg {
+  height: var(--icon-size-md);
+}
+.Icon_success2 {
+  color: var(--color-status-success);
+}
+.Icon_error2 {
+  color: var(--color-status-error);
+}
+.Icon_warning2 {
+  color: var(--color-status-warning);
+}
+.Icon_info2 {
+  color: var(--color-status-info);
+}
+.Icon_brand2 {
+  color: var(--color-fg-on-brand);
+}
+
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
 .RadioButtons_container2 {
   display: inline-flex;

package/dist/index.js

@@ -1335,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,
@@ -1350,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,
@@ -1359,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",
@@ -2734,6 +2774,7 @@ var Hyperlink_default = {
   primary: "Hyperlink_primary",
   block: "Hyperlink_block",
   content: "Hyperlink_content",
+  disabled: "Hyperlink_disabled",
   icon: "Hyperlink_icon"
 };
 function cx2(...parts) {
@@ -2755,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);
@@ -2774,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) {
@@ -2788,6 +2832,7 @@ function Hyperlink(props) {
       {
         type: "button",
         className: linkClassName,
+        disabled,
         ...rest,
         children: renderInner(children, icon)
       }
@@ -2796,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)
     }
@@ -12757,46 +12806,4 @@ function Alert({
   );
 }
 
-// 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 })
-      ]
-    }
-  );
-}
-
 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/tanstack.cjs

@@ -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",

package/dist/tanstack.css

@@ -168,12 +168,16 @@
 .Button_button2:disabled,
 .Button_button2[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button2:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link2 {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -632,6 +636,116 @@
   border-radius: var(--border-radius-default);
 }
 
+/* src/components/inline-status/InlineStatus.module.css */
+.InlineStatus_container2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+.InlineStatus_fullWidth2 {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+.InlineStatus_leading2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm2 {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md2 {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success2 {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+.InlineStatus_warning2 {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+.InlineStatus_error2 {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+.InlineStatus_info2 {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+.InlineStatus_brand2 {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
+/* src/components/icon/Icon.module.css */
+.Icon_container2 {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+}
+.Icon_icon2 {
+  display: flex;
+}
+.Icon_icon2 svg {
+  height: var(--icon-size-md);
+}
+.Icon_success2 {
+  color: var(--color-status-success);
+}
+.Icon_error2 {
+  color: var(--color-status-error);
+}
+.Icon_warning2 {
+  color: var(--color-status-warning);
+}
+.Icon_info2 {
+  color: var(--color-status-info);
+}
+.Icon_brand2 {
+  color: var(--color-fg-on-brand);
+}
+
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
 .RadioButtons_container2 {
   display: inline-flex;

package/dist/tanstack.js

@@ -2,7 +2,7 @@ import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/rea
 import * as React8 from 'react';
 import { createContext, forwardRef, useId, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useContext, useMemo } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { LoaderCircle, ChevronUp, ChevronDown, Check, ListChevronsDownUp, Settings, ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ArrowUp, ArrowDown } from 'lucide-react';
+import { LoaderCircle, ChevronUp, ChevronDown, Check, Building2, CircleAlert, Info, CircleX, CircleCheck, ListChevronsDownUp, Settings, ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ArrowUp, ArrowDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 
 // src/components/table/components/column-resizer/ColumnResizer.module.css
@@ -321,6 +321,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__ */ jsx(CircleCheck, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  error: /* @__PURE__ */ jsx(CircleX, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
+  brand: /* @__PURE__ */ jsx(Building2, {})
+};
+function Icon({ severity, label, customIcon }) {
+  return /* @__PURE__ */ jsxs("div", { className: `${Icon_default.container}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${Icon_default.icon} ${severity ? Icon_default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
+    label && /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+}
+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,
@@ -336,8 +403,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,
@@ -345,10 +410,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",