@dbcdk/react-components 0.0.101 → 0.0.102

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
@@ -2510,7 +2512,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: [
@@ -3428,6 +3430,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 +3561,7 @@ function CardImpl({
   loading = false,
   variant = "default",
   size = "md",
+  elevation = "sm",
   headerMarker = true,
   headerIcon,
   headerAddition,
@@ -3571,6 +3578,7 @@ function CardImpl({
   width,
   headlineSize = 4
 }) {
+  var _a;
   const outerStyle = width ? {
     ["--width"]: `${width}%`,
     ["--gap-share"]: getGapShare(width)
@@ -3578,6 +3586,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 +3624,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 +3671,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 +3698,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 +3719,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 2,
+              size: 1,
               severity,
               icon: headerIcon,
               subheader,
@@ -3720,7 +3731,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 +4303,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 +4323,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 +7556,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 +7603,9 @@ var SegmentedProgressBar = ({
   segments,
   total,
   showRemainder = true,
-  remainderSeverity = "neutral",
+  remainderSeverity = "missing",
   centerLabel,
-  height,
+  size = "sm",
   rounded = true,
   trackColor,
   tooltipPlacement = "top",
@@ -7624,7 +7643,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 +8525,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 +10688,7 @@ function SidePanel({
                 /* @__PURE__ */ jsx(
                   Headline,
                   {
-                    size: 3,
+                    size: 2,
                     disableMargin: true,
                     severity,
                     marker: showHeaderMarker,
@@ -11028,6 +11048,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 +11065,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 +11109,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 +11139,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 +11179,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
+  variant = "default",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
@@ -11164,9 +11189,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 +11237,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 +12757,46 @@ 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 };
+// 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/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(" ");
@@ -1658,7 +1658,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 +1678,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 })
                 }
               )
             },

package/dist/tanstack.css

@@ -194,12 +194,6 @@
 .Button_icon2 {
   display: inline-flex;
 }
-.Button_button2.Button_xs2 {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
 .Button_button2.Button_sm2 {
   height: var(--component-size-sm);
   min-block-size: var(--component-size-sm);
@@ -314,6 +308,17 @@
 .Button_inline2.Button_active2:hover {
   color: var(--button-bg-primary-hover);
 }
+.Button_button2.Button_xs2 {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.Button_button2.Button_xs2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
 
 /* src/components/menu/Menu.module.css */
 .Menu_container2 {
@@ -625,7 +630,6 @@
 .InputContainer_inputContainer2[data-modified] label:not(.InputContainer_label2) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
   border-radius: var(--border-radius-default);
-  padding: 2px 6px;
 }
 
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
@@ -766,7 +770,7 @@
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
   overflow: auto;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), var(--shadow-sm);
+  box-shadow: var(--shadow-md);
 }
 .Popover_content2[hidden] {
   display: none;

package/dist/tanstack.js

@@ -150,7 +150,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",
@@ -161,7 +160,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(" ");
@@ -1637,7 +1637,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",
@@ -1657,7 +1657,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 })
                 }
               )
             },

package/package.json

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