@norges-domstoler/dds-components 10.0.2 → 10.1.1

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

@@ -2,7 +2,7 @@ import { TableProps, SortOrder } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        density?: import("./Table").TableDensity | undefined;
+        density?: import("./Table.types").TableDensity | undefined;
         stickyHeader?: boolean | undefined;
         withDividers?: boolean | undefined;
     } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
@@ -11,8 +11,8 @@ declare const _default: {
         Body: import("react").ForwardRefExoticComponent<import("./Body").TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Foot: import("react").ForwardRefExoticComponent<import("./Foot").TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Row: import("react").ForwardRefExoticComponent<{
-            type?: import("./Row").TableRowType | undefined;
-            mode?: import("./Row").RowMode | undefined;
+            type?: import("./Table.types").TableRowType | undefined;
+            mode?: import("./Table.types").RowMode | undefined;
             selected?: boolean | undefined;
             hoverable?: boolean | undefined;
         } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
@@ -38,7 +38,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: (args: TableProps) => JSX.Element;
-export declare const withDividers: (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.styles.d.ts

@@ -0,0 +1,10 @@
+import { RowMode, TableRowType } from './Table.types';
+export declare const bodyRowStyles: (mode?: RowMode, selected?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+declare type StyledProps = {
+    type: TableRowType;
+    mode?: RowMode;
+    selected?: boolean;
+    hoverable?: boolean;
+};
+export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, StyledProps, never>;
+export {};

package/dist/components/Table/Table.styles.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+import { tableTokens } from './Table.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 { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
+
+var row = tableTokens.row;
+var bodyRowStyles = function bodyRowStyles(mode, selected) {
+  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: "Tablestyles__StyledRow",
+  componentId: "sc-1b057ci-0"
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
+  var type = _ref.type;
+  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){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyRowStyles(mode, selected), row.body.odd.backgroundColor, bodyRowStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
+});
+
+export { StyledRow, bodyRowStyles };

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

@@ -50,4 +50,9 @@ export declare const tableTokens: {
             };
         };
     };
+    collapseButton: {
+        height: string;
+        width: string;
+        borderRadius: string;
+    };
 };

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

@@ -2,7 +2,9 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
   border = ddsBaseTokens.border,
-  spacing = ddsBaseTokens.spacing;
+  spacing = ddsBaseTokens.spacing,
+  iconSizes = ddsBaseTokens.iconSizes,
+  borderRadius = ddsBaseTokens.borderRadius;
 var row = {
   body: {
     odd: {
@@ -54,9 +56,15 @@ var cell = {
     }
   }
 };
+var collapseButton = {
+  height: iconSizes.DdsIconsizeMedium,
+  width: iconSizes.DdsIconsizeMedium,
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius
+};
 var tableTokens = {
   row: row,
-  cell: cell
+  cell: cell,
+  collapseButton: collapseButton
 };
 
 export { tableTokens };

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare type TableDensity = 'normal' | 'compact';
+export declare type TableProps = {
+    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
+    density?: TableDensity;
+    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
+    stickyHeader?: boolean;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean;
+} & HTMLAttributes<HTMLTableElement>;
+export declare type HeaderValues = {
+    key: string;
+    content: ReactNode;
+}[];
+export declare type CollapsibleTableProps = {
+    /**Om tabellen skal kollapse. */
+    isCollapsed?: boolean;
+    /**Innhold i headere (`content`) og deres `key`. `headerValues.content` må være den samme som faktisk innhold i `<Table.Cell type='head'>`. */
+    headerValues: HeaderValues;
+    /**
+     * Indeksen(e) til kolonnen(e) som skal synes når tabellen er kollapset. Rekkefølgen i array avgjør rekkefølgen i render.
+     * @default [0]
+     *  */
+    definingColumnIndex?: number[];
+} & TableProps;
+export declare type TableRowType = 'body' | 'head';
+export declare type RowMode = 'normal' | 'sum';
+export declare type TableRowProps = {
+    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
+    type?: TableRowType;
+    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
+    mode?: RowMode;
+    /**Spesifiserer om raden har blitt valgt/markert. */
+    selected?: boolean;
+    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
+    hoverable?: boolean;
+} & HTMLAttributes<HTMLTableRowElement>;

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

@@ -0,0 +1,6 @@
+export declare const CollapsibleRow: import("react").ForwardRefExoticComponent<{
+    type?: import("../Table.types").TableRowType | undefined;
+    mode?: import("../Table.types").RowMode | undefined;
+    selected?: boolean | undefined;
+    hoverable?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/Table/collapsible/CollapsibleRow.js

@@ -0,0 +1,157 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, Children, Fragment, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { Table } from '../index.js';
+import { removeButtonStyling } from '../../../helpers/styling/removeButtonStyling.js';
+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 { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../../utils/idGenerator.js';
+import '../../../utils/color.js';
+import { DescriptionList } from '../../DescriptionList/DescriptionList.js';
+import { DescriptionListTerm } from '../../DescriptionList/DescriptionListTerm.js';
+import '../../DescriptionList/DescriptionListDesc.js';
+import '../../DescriptionList/DescriptionListGroup.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
+import { Cell } from '../Cell.js';
+import { useCollapsibleTableContext } from './Table.context.js';
+import '../../../helpers/Backdrop/Backdrop.js';
+import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.js';
+import '../../../helpers/HiddenInput/HiddenInput.js';
+import '../../../helpers/Input/Input.styles.js';
+import '../../../helpers/Input/Input.tokens.js';
+import '../../InputMessage/InputMessage.js';
+import '../../../helpers/Paper/Paper.js';
+import '../../../helpers/RequiredMarker/RequiredMarker.js';
+import { StyledRow } from '../Table.styles.js';
+import { tableTokens } from '../Table.tokens.js';
+
+var collapseButton = tableTokens.collapseButton;
+var CollapseButton = styled.button.withConfig({
+  displayName: "CollapsibleRow__CollapseButton",
+  componentId: "sc-1bsqre3-0"
+})(["", " margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;transition:", ";border-radius:", ";height:", ";width:", ";&:focus-visible{", "}"], removeButtonStyling, focusVisibleTransitionValue, collapseButton.borderRadius, collapseButton.height, collapseButton.width, focusVisible);
+var DescriptionListCell = styled(Cell).withConfig({
+  displayName: "CollapsibleRow__DescriptionListCell",
+  componentId: "sc-1bsqre3-1"
+})(["& > div{display:block;}"]);
+var CollapsibleRow = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$type = _a.type,
+    type = _a$type === void 0 ? 'body' : _a$type,
+    _a$mode = _a.mode,
+    mode = _a$mode === void 0 ? 'normal' : _a$mode,
+    children = _a.children,
+    rest = __rest(_a, ["type", "mode", "children"]);
+  var rowProps = Object.assign({
+    type: type,
+    mode: mode
+  }, rest);
+  var _useCollapsibleTableC = useCollapsibleTableContext(),
+    isCollapsed = _useCollapsibleTableC.isCollapsed,
+    headerValues = _useCollapsibleTableC.headerValues,
+    definingColumnIndex = _useCollapsibleTableC.definingColumnIndex;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    childrenCollapsed = _useState2[0],
+    setChildrenCollapsed = _useState2[1];
+  useEffect(function () {
+    !isCollapsed && setChildrenCollapsed(true);
+  }, [isCollapsed]);
+  var collapsedHeaderValues = headerValues.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var childrenArray = Children.toArray(children);
+  var collapsedChildren = childrenArray.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var prefix = 'collapsibleRow';
+  var collapsibleIds = [];
+  var collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function (child, index) {
+    var id = derivativeIdGenerator(prefix, index.toString());
+    collapsibleIds.push(id);
+    return jsxs(Fragment, {
+      children: [jsx(DescriptionListTerm, {
+        children: collapsedHeaderValues[index].content
+      }), /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+        collapsibleProps: {
+          isCollapsibleChild: true
+        }
+      })]
+    }, "DL-".concat(index));
+  }) : null;
+  var collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsx(StyledRow, Object.assign({
+    type: "body"
+  }, {
+    children: jsx(DescriptionListCell, Object.assign({
+      colSpan: definingColumnIndex.length + 1
+    }, {
+      children: jsx(DescriptionList, {
+        children: collapsedRenderedChildren
+      })
+    }))
+  })) : null;
+  var definingColumnCells = childrenArray.slice().filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) > -1;
+  }).sort(function (a, b) {
+    return definingColumnIndex.indexOf(childrenArray.indexOf(a)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
+  });
+  var headerRow = function headerRow() {
+    if (type !== 'head' || !isCollapsed) return null;
+    return jsx(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      children: jsxs(Fragment$1, {
+        children: [definingColumnCells, jsxs(Table.Cell, Object.assign({
+          type: "head",
+          layout: "center"
+        }, {
+          children: ["Utvid", jsx(VisuallyHidden, Object.assign({
+            as: "span"
+          }, {
+            children: "raden"
+          }))]
+        }))]
+      })
+    }));
+  };
+  var idList = spaceSeparatedIdListGenerator(collapsibleIds);
+  var rowWithChevron = function rowWithChevron() {
+    if (type !== 'body' || !isCollapsed) return null;
+    return jsxs(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      "data-isopencollapsibleheader": !childrenCollapsed && true
+    }, {
+      children: [definingColumnCells, jsx(Table.Cell, {
+        children: jsx(CollapseButton, Object.assign({
+          onClick: function onClick() {
+            return setChildrenCollapsed(!childrenCollapsed);
+          },
+          "aria-expanded": !childrenCollapsed,
+          "aria-controls": idList
+        }, {
+          children: jsx(AnimatedChevronUpDown, {
+            isUp: childrenCollapsed ? false : true,
+            height: "7.5px",
+            width: "12px"
+          })
+        }))
+      })]
+    }));
+  };
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsxs(Fragment$1, {
+    children: [headerRow(), type === 'body' && jsxs(Fragment$1, {
+      children: [rowWithChevron(), childrenCollapsed ? null : collapsedRows]
+    })]
+  }) : jsx(StyledRow, Object.assign({
+    ref: ref
+  }, rowProps, {
+    children: children
+  }));
+});
+
+export { CollapsibleRow };

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

@@ -0,0 +1,9 @@
+export declare const CollapsibleTable: import("react").ForwardRefExoticComponent<{
+    isCollapsed?: boolean | undefined;
+    headerValues: import("../Table.types").HeaderValues;
+    definingColumnIndex?: number[] | undefined;
+} & {
+    density?: import("../Table.types").TableDensity | undefined;
+    stickyHeader?: boolean | undefined;
+    withDividers?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/collapsible/CollapsibleTable.js

@@ -0,0 +1,42 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Table } from '../Table.js';
+import { CollapsibleTableContext } from './Table.context.js';
+
+var StyledTable = styled(Table).withConfig({
+  displayName: "CollapsibleTable__StyledTable",
+  componentId: "sc-1slp1a9-0"
+})(["width:100%;", ""], function (_ref) {
+  var withDividers = _ref.withDividers;
+  return withDividers && css(["tr[data-isopencollapsibleheader='true']{border-bottom:none;}"]);
+});
+var CollapsibleTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$density = props.density,
+    density = _props$density === void 0 ? 'normal' : _props$density,
+    children = props.children,
+    isCollapsed = props.isCollapsed,
+    headerValues = props.headerValues,
+    _props$definingColumn = props.definingColumnIndex,
+    definingColumnIndex = _props$definingColumn === void 0 ? [0] : _props$definingColumn,
+    rest = __rest(props, ["density", "children", "isCollapsed", "headerValues", "definingColumnIndex"]);
+  var tableProps = Object.assign({
+    ref: ref,
+    density: density,
+    isCollapsed: isCollapsed
+  }, rest);
+  return jsx(CollapsibleTableContext.Provider, Object.assign({
+    value: {
+      isCollapsed: isCollapsed,
+      headerValues: headerValues,
+      definingColumnIndex: definingColumnIndex
+    }
+  }, {
+    children: jsx(StyledTable, Object.assign({}, tableProps, {
+      children: children
+    }))
+  }));
+});
+
+export { CollapsibleTable };

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

@@ -0,0 +1,48 @@
+import { CollapsibleTableProps } from '..';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        isCollapsed?: boolean | undefined;
+        headerValues: import("../Table.types").HeaderValues;
+        definingColumnIndex?: number[] | undefined;
+    } & {
+        density?: import("..").TableDensity | undefined;
+        stickyHeader?: boolean | undefined;
+        withDividers?: boolean | undefined;
+    } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
+        Row: import("react").ForwardRefExoticComponent<{
+            type?: import("..").TableRowType | undefined;
+            mode?: import("../Table.types").RowMode | undefined;
+            selected?: boolean | undefined;
+            hoverable?: boolean | undefined;
+        } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+    };
+    argTypes: {
+        isCollapsed: {
+            control: {
+                type: string;
+            };
+        };
+        stickyHeader: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const SingleDefiningColumn: (args: CollapsibleTableProps) => JSX.Element;
+export declare const MultipleDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const PrioritizedDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const withDividers: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Compact: (args: CollapsibleTableProps) => JSX.Element;
+export declare const StickyHeader: (args: CollapsibleTableProps) => JSX.Element;
+export declare const WithButtonAndIcons: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Responsive: (args: CollapsibleTableProps) => JSX.Element;
+export declare const ResposiveMultipleBreakpoints: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Example: () => JSX.Element;

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

@@ -0,0 +1,9 @@
+import { HeaderValues } from '../Table.types';
+declare type CollapsibleTableContextProps = {
+    isCollapsed?: boolean;
+    headerValues: HeaderValues;
+    definingColumnIndex: number[];
+};
+export declare const CollapsibleTableContext: import("react").Context<CollapsibleTableContextProps>;
+export declare const useCollapsibleTableContext: () => CollapsibleTableContextProps;
+export {};

package/dist/components/Table/collapsible/Table.context.js

@@ -0,0 +1,11 @@
+import { useContext, createContext } from 'react';
+
+var CollapsibleTableContext = /*#__PURE__*/createContext({
+  headerValues: [],
+  definingColumnIndex: [0]
+});
+var useCollapsibleTableContext = function useCollapsibleTableContext() {
+  return useContext(CollapsibleTableContext);
+};
+
+export { CollapsibleTableContext, useCollapsibleTableContext };

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

@@ -1,8 +1,11 @@
-import { Table as BaseTable, TableProps, TableDensity } from './Table';
+import { Table as BaseTable } from './Table';
+import { CollapsibleTable as BaseCollapsibleTable } from './collapsible/CollapsibleTable';
+import { TableProps, TableDensity, CollapsibleTableProps, TableRowProps, TableRowType } from './Table.types';
 import { Head, TableHeadProps } from './Head';
 import { Body, TableBodyProps } from './Body';
 import { Foot, TableFootProps } from './Foot';
-import { Row, TableRowProps, TableRowType } from './Row';
+import { Row } from './Row';
+import { CollapsibleRow } from './collapsible/CollapsibleRow';
 import { Cell, TableCellProps, TableCellLayout, TableCellType } from './Cell';
 import { SortCell, TableSortCellProps, SortOrder } from './SortCell';
 import { TableWrapper } from './TableWrapper';
@@ -16,5 +19,10 @@ declare type TableCompoundProps = typeof BaseTable & {
     SortCell: typeof SortCell;
 };
 declare const Table: TableCompoundProps;
+declare type CollapsibleTableCompoundProps = typeof BaseCollapsibleTable & {
+    Row: typeof CollapsibleRow;
+};
+declare const CollapsibleTable: CollapsibleTableCompoundProps;
 export { Table };
-export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, };
+export { CollapsibleTable };
+export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, CollapsibleTableProps, };

package/dist/components/Table/index.js

@@ -1,8 +1,10 @@
 import { Table as Table$1 } from './Table.js';
+import { CollapsibleTable as CollapsibleTable$1 } from './collapsible/CollapsibleTable.js';
 import { Head } from './Head.js';
 import { Body } from './Body.js';
 import { Foot } from './Foot.js';
 import { Row } from './Row.js';
+import { CollapsibleRow } from './collapsible/CollapsibleRow.js';
 import { Cell } from './Cell.js';
 import { SortCell } from './SortCell.js';
 import { TableWrapper } from './TableWrapper.js';
@@ -15,5 +17,7 @@ Table.Cell = Cell;
 Table.SortCell = SortCell;
 Table.Row = Row;
 Table.Foot = Foot;
+var CollapsibleTable = CollapsibleTable$1;
+CollapsibleTable.Row = CollapsibleRow;
 
-export { Table };
+export { CollapsibleTable, Table };

package/dist/components/Tooltip/Tooltip.styles.js

@@ -33,7 +33,7 @@ var Container = styled.div.withConfig({
 var TooltipWrapper = styled(Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["", " width:fit-content;position:absolute;z-index:100;text-align:center;padding:", ";", ";"], function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:80;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, wrapper.padding, getFontStyling(defaultTypographyType));

package/dist/index.d.ts

@@ -42,3 +42,6 @@ export * from './hooks';
 export * from './components/InlineEdit';
 export * from './components/TextArea';
 export * from './components/SplitButton';
+export * from './components/Stack';
+export * from './components/FormGenerator';
+export * from './components/FileUploader';

package/dist/index.js

@@ -16,7 +16,7 @@ export { Heading } from './components/Typography/Heading/Heading.js';
 export { Link } from './components/Typography/Link/Link.js';
 export { Legend } from './components/Typography/Legend/Legend.js';
 export { Caption } from './components/Typography/Caption/Caption.js';
-export { Table } from './components/Table/index.js';
+export { CollapsibleTable, Table } from './components/Table/index.js';
 export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
 export { Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.js';
 export { Icon } from './components/Icon/Icon.js';
@@ -213,3 +213,6 @@ export { InlineEditTextArea } from './components/InlineEdit/InlineEditTextArea.j
 export { InlineEditInput } from './components/InlineEdit/InlineEditInput.js';
 export { StyledTextArea, TextArea } from './components/TextArea/TextArea.js';
 export { SplitButton } from './components/SplitButton/SplitButton.js';
+export { HStack, VStack } from './components/Stack/Stack.js';
+export { FormGenerator } from './components/FormGenerator/FormGenerator.js';
+export { FileUploader } from './components/FileUploader/FileUploader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.0.2",
+  "version": "10.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -90,7 +90,7 @@
     "typescript": "^4.8.3"
   },
   "peerDependencies": {
-    "@norges-domstoler/dds-design-tokens": "^3.0.0",
+    "@norges-domstoler/dds-design-tokens": "^3.0.1",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "styled-components": "^5"