@norges-domstoler/dds-components 7.1.0 → 7.2.0

package/dist/components/ProgressTracker/ProgressTrackerItem.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { focusVisibleTransitionValue, 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';
+import 'tslib';
+import '../../icons/utils/StyledSvg.js';
+import { CheckIcon } from '../../icons/tsx/check.js';
+import { Icon } from '../Icon/Icon.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { useProgressTrackerContext } from './ProgressTracker.context.js';
+import { progressTrackerTokens } from './ProgressTracker.tokens.js';
+
+var toItemState = function toItemState(active, completed, disabled) {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (active) {
+    return completed ? 'activeCompleted' : 'activeIncomplete';
+  } else {
+    return completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+  }
+};
+
+var itemNumber = progressTrackerTokens.itemNumber,
+    itemText = progressTrackerTokens.itemText,
+    itemContentWrapper = progressTrackerTokens.itemContentWrapper;
+var ItemWrapper = styled.li.withConfig({
+  displayName: "ProgressTrackerItem__ItemWrapper",
+  componentId: "sc-1j9qaj9-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;"]);
+var ItemNumber = styled.div.withConfig({
+  displayName: "ProgressTrackerItem__ItemNumber",
+  componentId: "sc-1j9qaj9-1"
+})(["border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;font-size:", ";font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, itemNumber.fontSize, function (_ref) {
+  var state = _ref.state;
+
+  switch (state) {
+    case 'activeIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.active.borderColor, itemNumber.active.color, itemNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
+
+    case 'inactiveCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.borderColor, itemNumber.inactive.color, itemNumber.inactive.backgroundColor);
+
+    case 'disabled':
+      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.disabled.borderColor, itemNumber.disabled.color, itemNumber.disabled.backgroundColor);
+  }
+});
+var ItemText = styled.div.withConfig({
+  displayName: "ProgressTrackerItem__ItemText",
+  componentId: "sc-1j9qaj9-2"
+})(["font-family:", ";font-size:", ";text-align:start;", ""], itemText.fontFamily, itemText.fontSize, function (_ref2) {
+  var state = _ref2.state;
+
+  switch (state) {
+    case 'activeCompleted':
+    case 'activeIncomplete':
+      return css(["color:", ";text-decoration ", ";"], itemText.active.color, itemText.active.textDecoration);
+
+    case 'inactiveCompleted':
+    case 'inactiveIncomplete':
+      return css(["color:", ";text-decoration ", ";"], itemText.inactive.color, itemText.inactive.textDecoration);
+
+    case 'disabled':
+      return css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
+  }
+});
+var ItemContentWrapper = styled.div.withConfig({
+  displayName: "ProgressTrackerItem__ItemContentWrapper",
+  componentId: "sc-1j9qaj9-3"
+})(["background:none;border:none;margin:0;padding:0;display:grid;grid-template-columns:", " 1fr;justify-content:flex-start;align-items:center;font-family:inherit;gap:", ";transition:", ";:focus-visible{", "}", " ", ""], itemNumber.size, itemContentWrapper.gap, focusVisibleTransitionValue, focusVisible, function (_ref3) {
+  var clickable = _ref3.clickable,
+      state = _ref3.state;
+
+  if (clickable) {
+    return css([":hover{", "{", "}", "{", "}}"], ItemNumber, function () {
+      if (state === 'inactiveCompleted') {
+        return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.hover.borderColor, itemNumber.completed.hover.color, itemNumber.completed.hover.backgroundColor);
+      } else if (state === 'inactiveIncomplete') {
+        return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.hover.borderColor, itemNumber.inactive.hover.color, itemNumber.inactive.hover.backgroundColor);
+      }
+    }, ItemText, function () {
+      if (state !== 'disabled') {
+        return css(["text-decoration ", ";"], itemText.inactive.hover.textDecoration);
+      }
+    });
+  }
+}, function (_ref4) {
+  var clickable = _ref4.clickable,
+      state = _ref4.state;
+  return clickable && state !== 'disabled' && css(["cursor:pointer;"]);
+});
+
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
+  return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+};
+
+var ProgressTrackerItem = function ProgressTrackerItem(props) {
+  var _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index,
+      _props$completed = props.completed,
+      completed = _props$completed === void 0 ? false : _props$completed,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      icon = props.icon,
+      children = props.children;
+
+  var _useProgressTrackerCo = useProgressTrackerContext(),
+      activeStep = _useProgressTrackerCo.activeStep;
+
+  var active = activeStep === index;
+  var styleProps = {
+    state: toItemState(active, completed, disabled),
+    clickable: props.onClick !== undefined
+  };
+  var stepNumberContent = useMemo(function () {
+    if (completed) {
+      return jsx(Icon, {
+        icon: CheckIcon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    if (icon !== undefined) {
+      return jsx(Icon, {
+        icon: icon,
+        iconSize: itemNumber.iconSize
+      });
+    }
+
+    return index + 1;
+  }, [completed, icon, index]);
+  return jsx(ItemWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxs(ItemContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: !disabled && props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined,
+      disabled: disabled
+    }, {
+      children: [jsx(ItemNumber, Object.assign({}, styleProps, {
+        "aria-hidden": true
+      }, {
+        children: stepNumberContent
+      })), jsxs(ItemText, Object.assign({}, styleProps, {
+        children: [jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed, index)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
+export { ProgressTrackerItem };

package/dist/components/ProgressTracker/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressTracker';

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

@@ -1,7 +1,7 @@
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "aria-describedby" | "onChange" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
         label?: string | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;

package/dist/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -1,7 +1,7 @@
 import { RadioButtonGroupProps } from '.';
 declare const _default: {
     title: string;
-    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
+    component: <T extends string | number = string>(props: Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange">, "id" | "className"> & {
         name?: string | undefined;
         label?: string | undefined;
         onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, value: T | undefined) => void) | undefined;

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

@@ -6,13 +6,13 @@ declare type ButtonProps = {
     label?: string;
     loading?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare type SearchProps = Pick<BaseInputProps, 'tip'> & {
+export declare type SearchProps = Pick<BaseInputProps, 'tip' | 'label'> & {
     /**Størrelsen på komponenten. */
     componentSize?: SearchSize;
     /**Props for søkeknappen. */
     buttonProps?: ButtonProps;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare const Search: import("react").ForwardRefExoticComponent<Pick<BaseInputProps, "tip"> & {
+export declare const Search: import("react").ForwardRefExoticComponent<Pick<BaseInputProps, "label" | "tip"> & {
     /**Størrelsen på komponenten. */
     componentSize?: SearchSize | undefined;
     /**Props for søkeknappen. */

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/SkipToContent/SkipToContent.stories.d.ts

@@ -1,7 +1,7 @@
 import { SkipToContentProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLAnchorElement>, "id" | "className"> & {
         text?: string | undefined;
         href: string;
         top?: import("csstype").Property.Top<string | number> | undefined;

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;