@norges-domstoler/dds-components 7.0.1 → 7.2.0

package/dist/components/Search/Search.js

@@ -7,7 +7,7 @@ import { searchTokens } from './Search.tokens.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
-import { Input as Input$1, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
+import { Input as Input$1 } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import '../../helpers/Paper/Paper.js';
 import '../../helpers/RequiredMarker/RequiredMarker.js';
@@ -17,9 +17,13 @@ import '../../utils/color.js';
 import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
 import { SearchIcon } from '../../icons/tsx/search.js';
+import '../Typography/Typography/Typography.js';
+import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Link/Link.js';
 
 var input = searchTokens.input,
-    container = searchTokens.container,
+    outerContainer = searchTokens.outerContainer,
+    horisontalContainer = searchTokens.horisontalContainer,
     icon = searchTokens.icon;
 
 var getIconSize = function getIconSize(size) {
@@ -49,32 +53,34 @@ var StyledIcon = styled(Icon).withConfig({
   var size = _ref2.size;
   return css(["top:", ";"], searchTokens.icon[size].top);
 });
-var Container = styled.div.withConfig({
-  displayName: "Search__Container",
+var OuterContainer = styled.div.withConfig({
+  displayName: "Search__OuterContainer",
   componentId: "sc-1ax3s9s-2"
-})(["display:flex;flex-direction:row;gap:", ";"], container.gap);
+})(["display:flex;flex-direction:column;gap:", ";"], outerContainer.gap);
+var HorisontalContainer = styled.div.withConfig({
+  displayName: "Search__HorisontalContainer",
+  componentId: "sc-1ax3s9s-3"
+})(["display:grid;grid-template-columns:1fr auto;gap:", ";"], horisontalContainer.gap);
 var InputContainer = styled.div.withConfig({
   displayName: "Search__InputContainer",
-  componentId: "sc-1ax3s9s-3"
-})(["position:relative;"]);
-var ButtonWrapper = styled.div.withConfig({
-  displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-4"
-})([""]);
+})(["position:relative;"]);
 var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
       buttonProps = _a.buttonProps,
       name = _a.name,
+      label = _a.label,
       tip = _a.tip,
       id = _a.id,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
+      rest = __rest(_a, ["componentSize", "buttonProps", "name", "label", "tip", "id", "className", "style", 'aria-describedby']);
 
   var generatedId = useId();
   var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
+  var hasLabel = !!label;
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {
@@ -92,33 +98,35 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
 
   var _b = buttonProps || {},
-      label = _b.label,
+      buttonLabel = _b.label,
       onClick = _b.onClick,
       otherButtonProps = __rest(_b, ["label", "onClick"]);
 
-  return jsxs(Container, Object.assign({}, containerProps, {
-    children: [jsxs(OuterInputContainer, Object.assign({
-      width: "100%"
+  return jsxs(OuterContainer, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId
     }, {
-      children: [jsxs(InputContainer, {
-        children: [jsx(StyledIcon, {
-          icon: SearchIcon,
+      children: label
+    })), jsxs("div", {
+      children: [jsxs(HorisontalContainer, Object.assign({}, containerProps, {
+        children: [jsxs(InputContainer, {
+          children: [jsx(StyledIcon, {
+            icon: SearchIcon,
+            size: componentSize,
+            iconSize: getIconSize(componentSize)
+          }), jsx(Input, Object.assign({}, inputProps))]
+        }), buttonProps && onClick && jsx(Button, Object.assign({
           size: componentSize,
-          iconSize: getIconSize(componentSize)
-        }), jsx(Input, Object.assign({}, inputProps))]
-      }), hasTip && jsx(InputMessage, {
+          label: buttonLabel || 'Søk',
+          onClick: onClick
+        }, otherButtonProps))]
+      })), hasTip && jsx(InputMessage, {
         id: tipId,
         messageType: "tip",
         message: tip
       })]
-    })), buttonProps && onClick && jsx(ButtonWrapper, {
-      children: jsx(Button, Object.assign({
-        size: componentSize,
-        label: label || 'Søk',
-        onClick: onClick
-      }, otherButtonProps))
     })]
-  }));
+  });
 });
 
 export { Search };

package/dist/components/Search/Search.stories.d.ts

@@ -1,7 +1,7 @@
 import { SearchProps } from './Search';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "tip"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "label" | "tip"> & {
         componentSize?: import("./Search").SearchSize | undefined;
         buttonProps?: ({
             onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -15,6 +15,11 @@ declare const _default: {
                 type: string;
             };
         };
+        label: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {
@@ -24,5 +29,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Overview: (args: SearchProps) => JSX.Element;
+export declare const OverviewSizes: (args: SearchProps) => JSX.Element;
 export declare const Default: (args: SearchProps) => JSX.Element;
 export declare const WithButton: (args: SearchProps) => JSX.Element;

package/dist/components/Search/Search.tokens.d.ts

@@ -61,7 +61,10 @@ export declare const searchTokens: {
             top: string;
         };
     };
-    container: {
+    horisontalContainer: {
+        gap: string;
+    };
+    outerContainer: {
         gap: string;
     };
 };

package/dist/components/Search/Search.tokens.js

@@ -33,9 +33,12 @@ var input = {
     }
   }
 };
-var container = {
+var horisontalContainer = {
   gap: spacing.SizesDdsSpacingLocalX05
 };
+var outerContainer = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
 var icon = {
   base: {
     left: spacing.SizesDdsSpacingLocalX075,
@@ -54,7 +57,8 @@ var icon = {
 var searchTokens = {
   input: input,
   icon: icon,
-  container: container
+  horisontalContainer: horisontalContainer,
+  outerContainer: outerContainer
 };
 
 export { searchTokens };

package/dist/components/Select/Select.js

@@ -2,14 +2,6 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import ReactSelect, { components } from 'react-select';
-import '../../helpers/Backdrop/Backdrop.js';
-import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
-import '../../helpers/HiddenInput/HiddenInput.js';
-import '../../helpers/Input/Input.styles.js';
-import '../../helpers/Input/Input.tokens.js';
-import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
-import '../../helpers/Paper/Paper.js';
-import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../../icons/utils/StyledSvg.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
 import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
@@ -22,6 +14,7 @@ import { prefix, getCustomStyles, Container, InnerSingleValue, StyledIcon } from
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
+import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
 
 var Option = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
@@ -166,7 +159,7 @@ var SelectInner = function SelectInner(props, ref) {
   var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
   var hasLabel = !!label;
   var hasErrorMessage = !!errorMessage;
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var containerProps = {
@@ -224,10 +217,11 @@ var SelectInner = function SelectInner(props, ref) {
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
   return jsxs(Container, Object.assign({}, containerProps, {
-    children: [hasLabel && jsxs(Label, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, " ", showRequiredMarker && jsx(RequiredMarker, {})]
+      children: label
     })), jsx(ReactSelect, Object.assign({}, reactSelectProps, {
       ref: ref
     })), errorMessage && jsx(InputMessage, {

package/dist/components/Table/Cell.d.ts

@@ -4,7 +4,7 @@ export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and ic
 export declare type TableCellProps = {
     /**Type celle. Returnerer enten `<td>` eller `<th>`. */
     type?: TableCellType;
-    /**Layout av innholdet i cellen. 'tekst and icon' legger margin mellom første barnet og andre barnet i cellen, og skal hovedsakelig brukes når innholdet er tekst og ikon; tekst må bli wrappet i `<span>` hvis det er det første barnet.  */
+    /**Layout av innholdet i cellen. 'tekst and icon' legger `gap` mellom barna og andre barnet i cellen.  */
     layout?: TableCellLayout;
 } & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
 export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/Cell.js

@@ -2,7 +2,9 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
+
+var cell = tableTokens.cell;
 
 var layoutStyle = function layoutStyle(layout) {
   switch (layout) {
@@ -13,7 +15,7 @@ var layoutStyle = function layoutStyle(layout) {
       return css(["justify-content:flex-end;"]);
 
     case 'text and icon':
-      return css(["& > *:first-of-type{", "}"], cellTokens.data.layout.textAndIcon.base);
+      return css(["gap:", ";"], cell.layout.textAndIcon.gap);
 
     default:
     case 'left':
@@ -24,9 +26,9 @@ var layoutStyle = function layoutStyle(layout) {
 var StyledCell = styled.td.withConfig({
   displayName: "Cell__StyledCell",
   componentId: "sc-ghfpfs-0"
-})(["", " ", ""], cellTokens.base, function (_ref) {
+})(["", ""], function (_ref) {
   var type = _ref.type;
-  return type && css(["", ""], cellTokens[type].base);
+  return type === 'head' && css(["background-color:", ";"], cell.head.backgroundColor);
 });
 var InnerCell = styled.div.withConfig({
   displayName: "Cell__InnerCell",

package/dist/components/Table/Row.js

@@ -2,24 +2,31 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { rowTokens } from './Row.tokens.js';
+import { focusVisibleInset } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
+import { tableTokens } from './Table.tokens.js';
+
+var row = tableTokens.row;
 
 var bodyStyles = function bodyStyles(mode, selected) {
-  return css(["", " ", ""], mode && css(["", ""], rowTokens.body.mode[mode].base), selected && css(["", ""], rowTokens.body.selected.base));
+  return css(["", " ", ""], mode === 'sum' && css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && css(["background-color:", ";"], row.body.selected.backgroundColor));
 };
 
 var StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-15vvjkk-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", ""], function (_ref) {
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " color:", ";", " ", ""], row.base.font, row.base.color, function (_ref) {
   var type = _ref.type;
-  return type && css(["", ""], rowTokens[type].base);
+  return type === 'head' && css(["font-weight:600;text-align:left;"]);
 }, function (_ref2) {
   var type = _ref2.type,
       mode = _ref2.mode,
       selected = _ref2.selected,
       hoverable = _ref2.hoverable;
-  return type === 'body' && css(["&:nth-of-type(even){", " ", "}&:nth-of-type(odd){", " ", "}", " &:focus-visible,&.focus-visible{", "}"], rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && css(["&:hover{", "}"], rowTokens.body.hover.base), rowTokens.body.focus.base);
+  return type === 'body' && css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
 });
 var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$type = _a.type,

package/dist/components/Table/SortCell.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Cell } from './Cell.js';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import '../../icons/utils/StyledSvg.js';
 import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
@@ -10,33 +10,30 @@ import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
 import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
-import '../../helpers/styling/focusVisible.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
 
-var SortIcon = styled(Icon).withConfig({
-  displayName: "SortCell__SortIcon",
-  componentId: "sc-1l3jzvh-0"
-})(["", ""], cellTokens.head.sortCell.icon.base);
+var cell = tableTokens.cell;
 var StyledButton = styled.button.withConfig({
   displayName: "SortCell__StyledButton",
-  componentId: "sc-1l3jzvh-1"
-})(["", " display:flex;align-items:center;&:focus-visible{", "}"], removeButtonStyling, cellTokens.head.sortCell.focus.base);
+  componentId: "sc-1l3jzvh-0"
+})(["", " display:flex;align-items:center;gap:", ";&:focus-visible{", "}"], removeButtonStyling, cell.sort.gap, focusVisible);
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
-    return jsx(SortIcon, {
+    return jsx(Icon, {
       icon: UnfoldMoreIcon,
       iconSize: "inherit"
     });
   }
 
-  return sortOrder === 'ascending' ? jsx(SortIcon, {
+  return sortOrder === 'ascending' ? jsx(Icon, {
     icon: ChevronDownIcon,
     iconSize: "inherit"
-  }) : jsx(SortIcon, {
+  }) : jsx(Icon, {
     icon: ChevronUpIcon,
     iconSize: "inherit"
   });

package/dist/components/Table/Table.d.ts

@@ -5,10 +5,14 @@ export declare type TableProps = {
     density?: TableDensity;
     /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean;
 } & HTMLAttributes<HTMLTableElement>;
 export declare const Table: import("react").ForwardRefExoticComponent<{
     /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity | undefined;
     /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean | undefined;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean | undefined;
 } & HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/Table.js

@@ -10,17 +10,22 @@ import { selection } from '../../helpers/styling/selection.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { cellTokens } from './Cell.tokens.js';
+import { tableTokens } from './Table.tokens.js';
 
+var cell = tableTokens.cell,
+    row = tableTokens.row;
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
-  return density && css(["td,th{", "}"], cellTokens.density[density].base);
+  return css(["td,th{padding:", ";}"], cell.density[density].padding);
 }, function (_ref2) {
   var stickyHeader = _ref2.stickyHeader;
   return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+}, function (_ref3) {
+  var withDividers = _ref3.withDividers;
+  return withDividers && css(["tr[type='body']{border-bottom:", ";}"], row.body.withDividers.borderBottom);
 });
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$density = _a.density,

package/dist/components/Table/Table.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<{
         density?: import("./Table").TableDensity | undefined;
         stickyHeader?: boolean | undefined;
+        withDividers?: boolean | undefined;
     } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
     argTypes: {
         stickyHeader: {
@@ -11,10 +12,16 @@ declare const _default: {
                 type: string;
             };
         };
+        withDividers: {
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;
 export declare const Default: (args: TableProps) => JSX.Element;
+export declare const withDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;

package/dist/components/Table/Table.tokens.d.ts

@@ -0,0 +1,72 @@
+export declare const tableTokens: {
+    row: {
+        base: {
+            color: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+        };
+        body: {
+            odd: {
+                backgroundColor: string;
+            };
+            even: {
+                backgroundColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+            };
+            selected: {
+                backgroundColor: string;
+            };
+            mode: {
+                sum: {
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    borderTop: string;
+                    borderBottom: string;
+                    backgroundColor: string;
+                };
+            };
+            withDividers: {
+                borderBottom: string;
+            };
+        };
+    };
+    cell: {
+        density: {
+            normal: {
+                padding: string;
+            };
+            compact: {
+                padding: string;
+            };
+        };
+        head: {
+            backgroundColor: string;
+        };
+        sort: {
+            gap: string;
+            icon: {
+                marginInlineStart: string;
+            };
+        };
+        layout: {
+            textAndIcon: {
+                gap: string;
+                marginRight: string;
+            };
+        };
+    };
+};

package/dist/components/Table/Table.tokens.js

@@ -0,0 +1,69 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    fontPackages = ddsBaseTokens.fontPackages,
+    border = ddsBaseTokens.border,
+    spacing = ddsBaseTokens.spacing;
+var textDefault = ddsReferenceTokens.textDefault;
+var row = {
+  base: {
+    color: textDefault.textColor,
+    font: fontPackages.body_sans_02.base
+  },
+  body: {
+    odd: {
+      backgroundColor: colors.DdsColorNeutralsWhite
+    },
+    even: {
+      backgroundColor: colors.DdsColorNeutralsGray1
+    },
+    hover: {
+      backgroundColor: colors.DdsColorInteractiveLightest
+    },
+    selected: {
+      backgroundColor: colors.DdsColorInteractiveLightest
+    },
+    mode: {
+      sum: {
+        font: fontPackages.body_sans_02.base,
+        borderTop: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray4),
+        borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray4),
+        backgroundColor: colors.DdsColorNeutralsWhite
+      }
+    },
+    withDividers: {
+      borderBottom: "1px solid ".concat(colors.DdsColorNeutralsGray4)
+    }
+  }
+};
+var cell = {
+  density: {
+    normal: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX15, " ").concat(spacing.SizesDdsSpacingLocalX075)
+    },
+    compact: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX075)
+    }
+  },
+  head: {
+    backgroundColor: colors.DdsColorPrimaryLightest
+  },
+  sort: {
+    gap: spacing.SizesDdsSpacingLocalX05,
+    icon: {
+      marginInlineStart: spacing.SizesDdsSpacingLocalX05
+    }
+  },
+  layout: {
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX075,
+      marginRight: spacing.SizesDdsSpacingLocalX075
+    }
+  }
+};
+var tableTokens = {
+  row: row,
+  cell: cell
+};
+
+export { tableTokens };

package/dist/components/Tag/Tag.js

@@ -4,6 +4,13 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { tagTokens } from './Tag.tokens.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 

package/dist/components/TextInput/CharCounter.js

@@ -4,6 +4,13 @@ import { useId } from 'react';
 import styled from 'styled-components';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography/Typography.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import '../Typography/Link/Link.js';
 
 var Wrapper = styled(Typography).withConfig({

package/dist/components/TextInput/TextInput.js

@@ -2,6 +2,8 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useId } from 'react';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -9,9 +11,7 @@ import { OuterInputContainer, InputContainer, StatefulInput } from '../../helper
 import '../../helpers/Input/Input.tokens.js';
 import { getFormInputIconSize } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
-import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { InputMessage } from '../InputMessage/InputMessage.js';
-import CharCounter from './CharCounter.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { TextArea, StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
@@ -119,12 +119,13 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: style,
     width: getWidth(componentSize, width)
   };
-  var showRequiredMarker = required || ariaRequired;
+  var showRequiredStyling = !!(required || ariaRequired);
   return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxs(Label, Object.assign({
-      htmlFor: uniqueId
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
     }, {
-      children: [label, showRequiredMarker && jsx(RequiredMarker, {})]
+      children: label
     })), multiline ? jsx(TextArea, Object.assign({
       ref: textAreaRef,
       as: "textarea",