@norges-domstoler/dds-components 14.0.0 → 14.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -3160,8 +3160,7 @@ import {
3160
3160
  import { jsx as jsx168 } from "react/jsx-runtime";
3161
3161
  var AppShellContext = createContext({
3162
3162
  isOpen: false,
3163
- setOpen: () => {
3164
- }
3163
+ setOpen: () => null
3165
3164
  });
3166
3165
  var AppShellContextProvider = ({
3167
3166
  children
@@ -6987,13 +6986,10 @@ function createEmptyChangeEvent(inputElementId) {
6987
6986
  defaultPrevented: false,
6988
6987
  eventPhase: 0,
6989
6988
  isTrusted: false,
6990
- preventDefault: () => {
6991
- },
6992
- stopPropagation: () => {
6993
- },
6989
+ preventDefault: () => null,
6990
+ stopPropagation: () => null,
6994
6991
  nativeEvent: new Event("input"),
6995
- persist: () => {
6996
- },
6992
+ persist: () => null,
6997
6993
  type: "change",
6998
6994
  timeStamp: Date.now(),
6999
6995
  isDefaultPrevented: () => false,
@@ -9540,8 +9536,7 @@ var Tooltip = forwardRef45(
9540
9536
  }
9541
9537
  return () => {
9542
9538
  if (tooltipRef.current) {
9543
- window.removeEventListener("scroll", () => {
9544
- });
9539
+ window.removeEventListener("scroll", () => null);
9545
9540
  }
9546
9541
  };
9547
9542
  }, []);
@@ -10720,6 +10715,7 @@ var DateInput = forwardRef50(
10720
10715
  InputDiv,
10721
10716
  {
10722
10717
  ...fieldProps,
10718
+ style,
10723
10719
  disabled,
10724
10720
  componentSize,
10725
10721
  ref: internalRef,
@@ -10808,8 +10804,7 @@ var { popover: popoverTokens } = calendarTokens;
10808
10804
  var CalendarPopoverContext = createContext5({
10809
10805
  anchorRef: null,
10810
10806
  isOpen: false,
10811
- onClose: () => {
10812
- }
10807
+ onClose: () => null
10813
10808
  });
10814
10809
  var CalendarPopover = ({
10815
10810
  children,
@@ -10929,9 +10924,7 @@ DatePicker.displayName = "DatePicker";
10929
10924
 
10930
10925
  // src/components/date-inputs/TimePicker/TimePicker.tsx
10931
10926
  import { forwardRef as forwardRef53, useRef as useRef22 } from "react";
10932
- import {
10933
- useTimeField
10934
- } from "@react-aria/datepicker";
10927
+ import { useTimeField } from "@react-aria/datepicker";
10935
10928
  import { useTimeFieldState } from "@react-stately/datepicker";
10936
10929
  import styled72 from "styled-components";
10937
10930
  import { jsx as jsx236 } from "react/jsx-runtime";
@@ -10940,7 +10933,7 @@ var TimePickerIcon = styled72(Icon)`
10940
10933
  width: ${({ $componentSize }) => datePickerTokens.calendarButton[$componentSize].size};
10941
10934
  margin-left: -1px; // To align with TextInputs icons
10942
10935
  `;
10943
- function _TimePicker({ componentSize = "medium", style, ...props }, forwardedRef) {
10936
+ function _TimePicker({ componentSize = "medium", ...props }, forwardedRef) {
10944
10937
  const ref = useRef22(null);
10945
10938
  const state = useTimeFieldState({
10946
10939
  ...props,
@@ -11498,8 +11491,51 @@ var tabsTokens = {
11498
11491
  panel
11499
11492
  };
11500
11493
 
11494
+ // src/components/Tabs/TabWidthContext.tsx
11495
+ import {
11496
+ createContext as createContext7,
11497
+ useContext as useContext9,
11498
+ useLayoutEffect as useLayoutEffect3
11499
+ } from "react";
11500
+ import { jsx as jsx242 } from "react/jsx-runtime";
11501
+ var TabContext = createContext7(null);
11502
+ function TabWidthContextProvider({
11503
+ children,
11504
+ onChangeWidths
11505
+ }) {
11506
+ return /* @__PURE__ */ jsx242(
11507
+ TabContext.Provider,
11508
+ {
11509
+ value: {
11510
+ updateWidth: (index, newWidth) => {
11511
+ onChangeWidths((prev) => {
11512
+ const newValue = [...prev];
11513
+ newValue[index] = newWidth;
11514
+ return newValue;
11515
+ });
11516
+ },
11517
+ removeTab: (index) => {
11518
+ onChangeWidths((prev) => {
11519
+ const newValue = [...prev];
11520
+ newValue.splice(index, 1);
11521
+ return newValue;
11522
+ });
11523
+ }
11524
+ },
11525
+ children
11526
+ }
11527
+ );
11528
+ }
11529
+ function useSetTabWidth(index, width) {
11530
+ const context = useContext9(TabContext);
11531
+ useLayoutEffect3(() => {
11532
+ context == null ? void 0 : context.updateWidth(index, width);
11533
+ return () => context == null ? void 0 : context.removeTab(index);
11534
+ }, [index, width]);
11535
+ }
11536
+
11501
11537
  // src/components/Tabs/Tab.tsx
11502
- import { jsx as jsx242, jsxs as jsxs59 } from "react/jsx-runtime";
11538
+ import { jsx as jsx243, jsxs as jsxs59 } from "react/jsx-runtime";
11503
11539
  var { tab: tab2 } = tabsTokens;
11504
11540
  var Button2 = styled77.button`
11505
11541
  ${normalizeButton}
@@ -11557,8 +11593,10 @@ var Tab = forwardRef57((props, ref) => {
11557
11593
  id,
11558
11594
  className,
11559
11595
  htmlProps,
11596
+ width = "1fr",
11560
11597
  ...rest
11561
11598
  } = props;
11599
+ useSetTabWidth(index, width);
11562
11600
  const itemRef = useRef25(null);
11563
11601
  const combinedRef = useCombinedRef(ref, itemRef);
11564
11602
  const { tabPanelsRef, setHasTabFocus, tabContentDirection } = useTabsContext();
@@ -11600,8 +11638,8 @@ var Tab = forwardRef57((props, ref) => {
11600
11638
  onKeyDown: handleOnKeyDown,
11601
11639
  tabIndex: focus ? 0 : -1,
11602
11640
  children: [
11603
- icon12 && /* @__PURE__ */ jsx242(Icon, { icon: icon12, iconSize: "inherit" }),
11604
- /* @__PURE__ */ jsx242("span", { children })
11641
+ icon12 && /* @__PURE__ */ jsx243(Icon, { icon: icon12, iconSize: "inherit" }),
11642
+ /* @__PURE__ */ jsx243("span", { children })
11605
11643
  ]
11606
11644
  }
11607
11645
  );
@@ -11613,16 +11651,23 @@ import {
11613
11651
  forwardRef as forwardRef58,
11614
11652
  Children as Children4,
11615
11653
  isValidElement as isValidElement6,
11616
- cloneElement as cloneElement6
11654
+ cloneElement as cloneElement6,
11655
+ useState as useState24
11617
11656
  } from "react";
11618
- import styled78 from "styled-components";
11619
- import { jsx as jsx243 } from "react/jsx-runtime";
11657
+ import styled78, { css as css39 } from "styled-components";
11658
+ import { jsx as jsx244 } from "react/jsx-runtime";
11620
11659
  var { tabList: tabList2 } = tabsTokens;
11660
+ var autoFlow = css39`
11661
+ grid-auto-flow: column;
11662
+ grid-auto-columns: 1fr;
11663
+ `;
11664
+ var templateColumns = (templateColumns2) => css39`
11665
+ grid-template-columns: ${templateColumns2};
11666
+ `;
11621
11667
  var TabRow = styled78.div`
11622
11668
  border-bottom: ${tabList2.borderBottom};
11623
11669
  display: grid;
11624
- grid-auto-flow: column;
11625
- grid-auto-columns: 1fr;
11670
+ ${({ $gridTemplateColumns }) => $gridTemplateColumns === "" ? autoFlow : templateColumns($gridTemplateColumns)}
11626
11671
  overflow-x: auto;
11627
11672
  ${scrollbarStyling.webkit}
11628
11673
  ${scrollbarStyling.firefox}
@@ -11664,6 +11709,7 @@ var TabList = forwardRef58(
11664
11709
  onClick: () => handleTabChange(index)
11665
11710
  });
11666
11711
  });
11712
+ const [widths, setWidths] = useState24([]);
11667
11713
  useOnKeyDown("Tab", () => {
11668
11714
  var _a;
11669
11715
  setHasTabFocus(false);
@@ -11685,15 +11731,15 @@ var TabList = forwardRef58(
11685
11731
  tabIndex: 0,
11686
11732
  onFocus: handleOnFocus
11687
11733
  };
11688
- return /* @__PURE__ */ jsx243(TabRow, { ...tabListProps, children: tabListChildren });
11734
+ return /* @__PURE__ */ jsx244(TabWidthContextProvider, { onChangeWidths: setWidths, children: /* @__PURE__ */ jsx244(TabRow, { ...tabListProps, $gridTemplateColumns: widths.join(" "), children: tabListChildren }) });
11689
11735
  }
11690
11736
  );
11691
11737
  TabList.displayName = "TabList";
11692
11738
 
11693
11739
  // src/components/Tabs/TabPanel.tsx
11694
11740
  import { forwardRef as forwardRef59 } from "react";
11695
- import styled79, { css as css39 } from "styled-components";
11696
- import { jsx as jsx244 } from "react/jsx-runtime";
11741
+ import styled79, { css as css40 } from "styled-components";
11742
+ import { jsx as jsx245 } from "react/jsx-runtime";
11697
11743
  var { panel: panel2 } = tabsTokens;
11698
11744
  var Panel = styled79.div`
11699
11745
  padding: ${panel2.padding};
@@ -11701,7 +11747,7 @@ var Panel = styled79.div`
11701
11747
  transition: ${focusVisibleTransitionValue};
11702
11748
  }
11703
11749
 
11704
- ${({ $active }) => !$active && css39`
11750
+ ${({ $active }) => !$active && css40`
11705
11751
  display: none;
11706
11752
  `}
11707
11753
  &:focus-visible {
@@ -11710,7 +11756,7 @@ var Panel = styled79.div`
11710
11756
  `;
11711
11757
  var TabPanel = forwardRef59(
11712
11758
  ({ active = false, children, id, className, htmlProps, ...rest }, ref) => {
11713
- return /* @__PURE__ */ jsx244(
11759
+ return /* @__PURE__ */ jsx245(
11714
11760
  Panel,
11715
11761
  {
11716
11762
  ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -11732,7 +11778,7 @@ import {
11732
11778
  cloneElement as cloneElement7,
11733
11779
  isValidElement as isValidElement7
11734
11780
  } from "react";
11735
- import { jsx as jsx245 } from "react/jsx-runtime";
11781
+ import { jsx as jsx246 } from "react/jsx-runtime";
11736
11782
  var TabPanels = forwardRef60(
11737
11783
  ({ children, ...rest }, ref) => {
11738
11784
  const { activeTab, tabsId, tabPanelsRef } = useTabsContext();
@@ -11746,14 +11792,14 @@ var TabPanels = forwardRef60(
11746
11792
  "aria-expanded": active
11747
11793
  });
11748
11794
  });
11749
- return /* @__PURE__ */ jsx245("div", { ref: combinedRef, ...rest, children: panelChildren });
11795
+ return /* @__PURE__ */ jsx246("div", { ref: combinedRef, ...rest, children: panelChildren });
11750
11796
  }
11751
11797
  );
11752
11798
  TabPanels.displayName = "TabPanels";
11753
11799
 
11754
11800
  // src/components/Tag/Tag.tsx
11755
11801
  import { forwardRef as forwardRef61 } from "react";
11756
- import styled80, { css as css40 } from "styled-components";
11802
+ import styled80, { css as css41 } from "styled-components";
11757
11803
 
11758
11804
  // src/components/Tag/Tag.tokens.tsx
11759
11805
  import { ddsBaseTokens as ddsBaseTokens48 } from "@norges-domstoler/dds-design-tokens";
@@ -11779,7 +11825,7 @@ var tagTokens = {
11779
11825
  };
11780
11826
 
11781
11827
  // src/components/Tag/Tag.tsx
11782
- import { jsx as jsx246 } from "react/jsx-runtime";
11828
+ import { jsx as jsx247 } from "react/jsx-runtime";
11783
11829
  var { wrapper: wrapper8 } = tagTokens;
11784
11830
  var Wrapper7 = styled80(TextOverflowEllipsisWrapper)`
11785
11831
  display: inline-flex;
@@ -11788,7 +11834,7 @@ var Wrapper7 = styled80(TextOverflowEllipsisWrapper)`
11788
11834
  border-radius: ${wrapper8.borderRadius};
11789
11835
  padding: ${wrapper8.padding};
11790
11836
  ${getFontStyling(typographyType5)}
11791
- ${({ $purpose }) => css40`
11837
+ ${({ $purpose }) => css41`
11792
11838
  background-color: ${wrapper8.purpose[$purpose].backgroundColor};
11793
11839
  border-color: ${wrapper8.purpose[$purpose].borderColor};
11794
11840
  `}
@@ -11802,20 +11848,20 @@ var Tag = forwardRef61((props, ref) => {
11802
11848
  htmlProps,
11803
11849
  ...rest
11804
11850
  } = props;
11805
- return /* @__PURE__ */ jsx246(
11851
+ return /* @__PURE__ */ jsx247(
11806
11852
  Wrapper7,
11807
11853
  {
11808
11854
  ...getBaseHTMLProps(id, className, htmlProps, rest),
11809
11855
  ref,
11810
11856
  $purpose: purpose,
11811
- children: /* @__PURE__ */ jsx246(TextOverflowEllipsisInner, { children: text })
11857
+ children: /* @__PURE__ */ jsx247(TextOverflowEllipsisInner, { children: text })
11812
11858
  }
11813
11859
  );
11814
11860
  });
11815
11861
  Tag.displayName = "Tag";
11816
11862
 
11817
11863
  // src/components/Chip/Chip.tsx
11818
- import { forwardRef as forwardRef62, useState as useState24 } from "react";
11864
+ import { forwardRef as forwardRef62, useState as useState25 } from "react";
11819
11865
  import styled81 from "styled-components";
11820
11866
 
11821
11867
  // src/components/Chip/Chip.tokens.tsx
@@ -11838,7 +11884,7 @@ var chipTokens = {
11838
11884
  };
11839
11885
 
11840
11886
  // src/components/Chip/Chip.tsx
11841
- import { jsx as jsx247, jsxs as jsxs60 } from "react/jsx-runtime";
11887
+ import { jsx as jsx248, jsxs as jsxs60 } from "react/jsx-runtime";
11842
11888
  var { container: container17 } = chipTokens;
11843
11889
  var Container15 = styled81(TextOverflowEllipsisWrapper)`
11844
11890
  display: flex;
@@ -11854,7 +11900,7 @@ var Container15 = styled81(TextOverflowEllipsisWrapper)`
11854
11900
  var Chip = forwardRef62((props, ref) => {
11855
11901
  const { text, onClose, id, className, htmlProps = {}, ...rest } = props;
11856
11902
  const { "aria-label": ariaLabel, ...restHTMLprops } = htmlProps;
11857
- const [isOpen, setIsOpen] = useState24(true);
11903
+ const [isOpen, setIsOpen] = useState25(true);
11858
11904
  const onClick = () => {
11859
11905
  setIsOpen(false);
11860
11906
  onClose && onClose();
@@ -11866,8 +11912,8 @@ var Chip = forwardRef62((props, ref) => {
11866
11912
  ref,
11867
11913
  as: "div",
11868
11914
  children: [
11869
- /* @__PURE__ */ jsx247(TextOverflowEllipsisInner, { children: text }),
11870
- /* @__PURE__ */ jsx247(
11915
+ /* @__PURE__ */ jsx248(TextOverflowEllipsisInner, { children: text }),
11916
+ /* @__PURE__ */ jsx248(
11871
11917
  Button,
11872
11918
  {
11873
11919
  size: "tiny",
@@ -11887,7 +11933,7 @@ Chip.displayName = "Chip";
11887
11933
  // src/components/Chip/ChipGroup.tsx
11888
11934
  import { forwardRef as forwardRef63, Children as Children6 } from "react";
11889
11935
  import styled82 from "styled-components";
11890
- import { jsx as jsx248 } from "react/jsx-runtime";
11936
+ import { jsx as jsx249 } from "react/jsx-runtime";
11891
11937
  var Group2 = styled82.ul`
11892
11938
  ${removeListStyling}
11893
11939
  display: flex;
@@ -11896,22 +11942,22 @@ var Group2 = styled82.ul`
11896
11942
  var ChipGroup = forwardRef63(
11897
11943
  ({ children, ...rest }, ref) => {
11898
11944
  const childrenArray = Children6.toArray(children);
11899
- const groupChildren = childrenArray.map((item, index) => /* @__PURE__ */ jsx248("li", { children: item }, `chip-${index}`));
11900
- return /* @__PURE__ */ jsx248(Group2, { ...rest, ref, children: groupChildren });
11945
+ const groupChildren = childrenArray.map((item, index) => /* @__PURE__ */ jsx249("li", { children: item }, `chip-${index}`));
11946
+ return /* @__PURE__ */ jsx249(Group2, { ...rest, ref, children: groupChildren });
11901
11947
  }
11902
11948
  );
11903
11949
  ChipGroup.displayName = "ChipGroup";
11904
11950
 
11905
11951
  // src/components/ToggleBar/ToggleBar.tsx
11906
- import { useState as useState25, useId as useId21 } from "react";
11907
- import styled83, { css as css41 } from "styled-components";
11952
+ import { useState as useState26, useId as useId21 } from "react";
11953
+ import styled83, { css as css42 } from "styled-components";
11908
11954
 
11909
11955
  // src/components/ToggleBar/ToggleBar.context.tsx
11910
- import { createContext as createContext7, useContext as useContext9 } from "react";
11911
- var ToggleBarContext = createContext7({
11956
+ import { createContext as createContext8, useContext as useContext10 } from "react";
11957
+ var ToggleBarContext = createContext8({
11912
11958
  size: "medium"
11913
11959
  });
11914
- var useToggleBarContext = () => useContext9(ToggleBarContext);
11960
+ var useToggleBarContext = () => useContext10(ToggleBarContext);
11915
11961
 
11916
11962
  // src/components/ToggleBar/ToggleBar.tokens.tsx
11917
11963
  import { ddsBaseTokens as ddsBaseTokens50 } from "@norges-domstoler/dds-design-tokens";
@@ -12020,7 +12066,7 @@ var toggleBarTokens = {
12020
12066
  };
12021
12067
 
12022
12068
  // src/components/ToggleBar/ToggleBar.tsx
12023
- import { jsx as jsx249, jsxs as jsxs61 } from "react/jsx-runtime";
12069
+ import { jsx as jsx250, jsxs as jsxs61 } from "react/jsx-runtime";
12024
12070
  var OuterContainer4 = styled83.div`
12025
12071
  display: flex;
12026
12072
  flex-direction: column;
@@ -12029,7 +12075,7 @@ var OuterContainer4 = styled83.div`
12029
12075
  *::selection {
12030
12076
  ${selection}
12031
12077
  }
12032
- ${({ $width }) => $width && css41`
12078
+ ${({ $width }) => $width && css42`
12033
12079
  width: ${$width};
12034
12080
  `}
12035
12081
  `;
@@ -12054,13 +12100,13 @@ var ToggleBar = (props) => {
12054
12100
  } = props;
12055
12101
  const generatedId = useId21();
12056
12102
  const uniqueId = id != null ? id : `${generatedId}-ToggleBar`;
12057
- const [groupValue, setGroupValue] = useState25(value);
12103
+ const [groupValue, setGroupValue] = useState26(value);
12058
12104
  const handleChange = combineHandlers(
12059
12105
  (e) => setGroupValue(e.target.value),
12060
12106
  (e) => onChange && onChange(e, e.target.value)
12061
12107
  );
12062
12108
  const labelId = label3 && `${uniqueId}-label`;
12063
- return /* @__PURE__ */ jsx249(
12109
+ return /* @__PURE__ */ jsx250(
12064
12110
  ToggleBarContext.Provider,
12065
12111
  {
12066
12112
  value: {
@@ -12077,8 +12123,8 @@ var ToggleBar = (props) => {
12077
12123
  "aria-labelledby": labelId != null ? labelId : htmlProps == null ? void 0 : htmlProps["aria-labelledby"],
12078
12124
  $width: width,
12079
12125
  children: [
12080
- label3 && /* @__PURE__ */ jsx249(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
12081
- /* @__PURE__ */ jsx249(Bar2, { children })
12126
+ label3 && /* @__PURE__ */ jsx250(Typography, { typographyType: "supportingStyleLabel01", id: labelId, children: label3 }),
12127
+ /* @__PURE__ */ jsx250(Bar2, { children })
12082
12128
  ]
12083
12129
  }
12084
12130
  )
@@ -12091,7 +12137,7 @@ ToggleBar.displayName = "ToggleBar";
12091
12137
  import { forwardRef as forwardRef64, useId as useId22 } from "react";
12092
12138
 
12093
12139
  // src/components/ToggleBar/ToggleRadio.styles.tsx
12094
- import styled84, { css as css42 } from "styled-components";
12140
+ import styled84, { css as css43 } from "styled-components";
12095
12141
  var { content: content6, label: label2 } = toggleBarTokens;
12096
12142
  var Content3 = styled84.span`
12097
12143
  display: flex;
@@ -12111,11 +12157,11 @@ var Content3 = styled84.span`
12111
12157
  }
12112
12158
  background-color: ${content6.base.backgroundColor};
12113
12159
 
12114
- ${({ $size, $justIcon }) => css42`
12115
- ${$justIcon ? css42`
12160
+ ${({ $size, $justIcon }) => css43`
12161
+ ${$justIcon ? css43`
12116
12162
  font-size: ${content6.size[$size].justIcon.fontSize};
12117
12163
  padding: ${content6.size[$size].justIcon.padding};
12118
- ` : css42`
12164
+ ` : css43`
12119
12165
  gap: ${content6.size[$size].withText.gap};
12120
12166
  padding: ${content6.size[$size].withText.padding};
12121
12167
  ${getFontStyling(typographyTypes6[$size])}
@@ -12160,7 +12206,7 @@ var Label3 = styled84.label`
12160
12206
  `;
12161
12207
 
12162
12208
  // src/components/ToggleBar/ToggleRadio.tsx
12163
- import { jsx as jsx250, jsxs as jsxs62 } from "react/jsx-runtime";
12209
+ import { jsx as jsx251, jsxs as jsxs62 } from "react/jsx-runtime";
12164
12210
  var calculateChecked = (value, group4, checked) => {
12165
12211
  if (typeof checked !== "undefined")
12166
12212
  return checked;
@@ -12194,7 +12240,7 @@ var ToggleRadio = forwardRef64(
12194
12240
  (group4 == null ? void 0 : group4.onChange) && group4.onChange(event);
12195
12241
  };
12196
12242
  return /* @__PURE__ */ jsxs62(Label3, { size: group4.size, htmlFor: uniqueId, children: [
12197
- /* @__PURE__ */ jsx250(
12243
+ /* @__PURE__ */ jsx251(
12198
12244
  HiddenInput,
12199
12245
  {
12200
12246
  ...getBaseHTMLProps(uniqueId, className, htmlProps, rest),
@@ -12207,8 +12253,8 @@ var ToggleRadio = forwardRef64(
12207
12253
  }
12208
12254
  ),
12209
12255
  /* @__PURE__ */ jsxs62(Content3, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [
12210
- icon12 && /* @__PURE__ */ jsx250(Icon, { icon: icon12, iconSize: "inherit" }),
12211
- label3 && /* @__PURE__ */ jsx250("span", { children: label3 })
12256
+ icon12 && /* @__PURE__ */ jsx251(Icon, { icon: icon12, iconSize: "inherit" }),
12257
+ label3 && /* @__PURE__ */ jsx251("span", { children: label3 })
12212
12258
  ] })
12213
12259
  ] });
12214
12260
  }
@@ -12216,7 +12262,7 @@ var ToggleRadio = forwardRef64(
12216
12262
  ToggleRadio.displayName = "ToggleRadio";
12217
12263
 
12218
12264
  // src/components/Grid/Grid.tsx
12219
- import styled85, { css as css43 } from "styled-components";
12265
+ import styled85, { css as css44 } from "styled-components";
12220
12266
 
12221
12267
  // src/components/Grid/Grid.tokens.tsx
12222
12268
  import { ddsBaseTokens as ddsBaseTokens51 } from "@norges-domstoler/dds-design-tokens";
@@ -12313,16 +12359,16 @@ var gridTokens2 = {
12313
12359
  };
12314
12360
 
12315
12361
  // src/components/Grid/Grid.context.tsx
12316
- import { useContext as useContext10, createContext as createContext8 } from "react";
12317
- var GridContext = createContext8({
12362
+ import { useContext as useContext11, createContext as createContext9 } from "react";
12363
+ var GridContext = createContext9({
12318
12364
  screenSize: 3 /* Large */
12319
12365
  });
12320
12366
  var useGridContext = () => {
12321
- return useContext10(GridContext);
12367
+ return useContext11(GridContext);
12322
12368
  };
12323
12369
 
12324
12370
  // src/components/Grid/Grid.tsx
12325
- import { jsx as jsx251 } from "react/jsx-runtime";
12371
+ import { jsx as jsx252 } from "react/jsx-runtime";
12326
12372
  var getHooksGridStyling = (screenSize, maxWidth, rowGap) => {
12327
12373
  const tokens3 = gridTokens2[screenSize].grid;
12328
12374
  return {
@@ -12345,7 +12391,7 @@ var StyledGrid = styled85.div.withConfig({
12345
12391
  }
12346
12392
  })`
12347
12393
  display: grid;
12348
- ${({ maxWidth }) => css43`
12394
+ ${({ maxWidth }) => css44`
12349
12395
  max-width: ${maxWidth};
12350
12396
  `}
12351
12397
  ${({ screenSize, maxWidth, rowGap }) => getHooksGridStyling(screenSize, maxWidth, rowGap)}
@@ -12353,14 +12399,14 @@ var StyledGrid = styled85.div.withConfig({
12353
12399
  var Grid = (props) => {
12354
12400
  const { id, className, children, htmlProps, as, ...rest } = props;
12355
12401
  const screenSize = useScreenSize();
12356
- return /* @__PURE__ */ jsx251(GridContext.Provider, { value: { screenSize }, children: as === "div" ? /* @__PURE__ */ jsx251(
12402
+ return /* @__PURE__ */ jsx252(GridContext.Provider, { value: { screenSize }, children: as === "div" ? /* @__PURE__ */ jsx252(
12357
12403
  StyledGrid,
12358
12404
  {
12359
12405
  ...getBaseHTMLProps(id, className, htmlProps, rest),
12360
12406
  screenSize,
12361
12407
  children
12362
12408
  }
12363
- ) : /* @__PURE__ */ jsx251(
12409
+ ) : /* @__PURE__ */ jsx252(
12364
12410
  StyledGrid,
12365
12411
  {
12366
12412
  ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -12374,7 +12420,7 @@ Grid.displayName = "Grid";
12374
12420
 
12375
12421
  // src/components/Grid/GridChild.tsx
12376
12422
  import styled86 from "styled-components";
12377
- import { jsx as jsx252 } from "react/jsx-runtime";
12423
+ import { jsx as jsx253 } from "react/jsx-runtime";
12378
12424
  var isRelativeGridColumn = (type) => {
12379
12425
  return type === "all" || type === "firstHalf" || type === "secondHalf";
12380
12426
  };
@@ -12400,7 +12446,7 @@ var StyledGridChild = styled86.div.withConfig({
12400
12446
  var GridChild = (props) => {
12401
12447
  const { id, className, htmlProps, children, ...rest } = props;
12402
12448
  const { screenSize } = useGridContext();
12403
- return /* @__PURE__ */ jsx252(
12449
+ return /* @__PURE__ */ jsx253(
12404
12450
  StyledGridChild,
12405
12451
  {
12406
12452
  ...getBaseHTMLProps(id, className, htmlProps, rest),
@@ -12419,19 +12465,19 @@ import {
12419
12465
  Fragment as Fragment11,
12420
12466
  isValidElement as isValidElement8,
12421
12467
  useEffect as useEffect24,
12422
- useState as useState26,
12468
+ useState as useState27,
12423
12469
  useMemo as useMemo2
12424
12470
  } from "react";
12425
12471
  import styled88 from "styled-components";
12426
12472
 
12427
12473
  // src/components/ProgressTracker/ProgressTracker.context.tsx
12428
- import { createContext as createContext9, useContext as useContext11 } from "react";
12429
- var ProgressTrackerContext = createContext9(
12474
+ import { createContext as createContext10, useContext as useContext12 } from "react";
12475
+ var ProgressTrackerContext = createContext10(
12430
12476
  {
12431
12477
  activeStep: 0
12432
12478
  }
12433
12479
  );
12434
- var useProgressTrackerContext = () => useContext11(ProgressTrackerContext);
12480
+ var useProgressTrackerContext = () => useContext12(ProgressTrackerContext);
12435
12481
 
12436
12482
  // src/components/ProgressTracker/ProgressTracker.tokens.tsx
12437
12483
  import { ddsBaseTokens as ddsBaseTokens52 } from "@norges-domstoler/dds-design-tokens";
@@ -12514,8 +12560,8 @@ var progressTrackerTokens = {
12514
12560
 
12515
12561
  // src/components/ProgressTracker/ProgressTrackerItem.tsx
12516
12562
  import { useMemo } from "react";
12517
- import styled87, { css as css44 } from "styled-components";
12518
- import { jsx as jsx253, jsxs as jsxs63 } from "react/jsx-runtime";
12563
+ import styled87, { css as css45 } from "styled-components";
12564
+ import { jsx as jsx254, jsxs as jsxs63 } from "react/jsx-runtime";
12519
12565
  var toItemState = (active, completed, disabled) => {
12520
12566
  if (disabled) {
12521
12567
  return "disabled";
@@ -12552,31 +12598,31 @@ var ItemNumber = styled87.div`
12552
12598
  ${({ $state: state }) => {
12553
12599
  switch (state) {
12554
12600
  case "activeIncomplete":
12555
- return css44`
12601
+ return css45`
12556
12602
  border-color: ${itemNumber2.active.borderColor};
12557
12603
  color: ${itemNumber2.active.color};
12558
12604
  background-color: ${itemNumber2.active.backgroundColor};
12559
12605
  `;
12560
12606
  case "activeCompleted":
12561
- return css44`
12607
+ return css45`
12562
12608
  border-color: ${itemNumber2.completed.borderColor};
12563
12609
  color: ${itemNumber2.completed.color};
12564
12610
  background-color: ${itemNumber2.completed.backgroundColor};
12565
12611
  `;
12566
12612
  case "inactiveCompleted":
12567
- return css44`
12613
+ return css45`
12568
12614
  border-color: ${itemNumber2.completed.borderColor};
12569
12615
  color: ${itemNumber2.completed.color};
12570
12616
  background-color: ${itemNumber2.completed.backgroundColor};
12571
12617
  `;
12572
12618
  case "inactiveIncomplete":
12573
- return css44`
12619
+ return css45`
12574
12620
  border-color: ${itemNumber2.inactive.borderColor};
12575
12621
  color: ${itemNumber2.inactive.color};
12576
12622
  background-color: ${itemNumber2.inactive.backgroundColor};
12577
12623
  `;
12578
12624
  case "disabled":
12579
- return css44`
12625
+ return css45`
12580
12626
  border-color: ${itemNumber2.disabled.borderColor};
12581
12627
  color: ${itemNumber2.disabled.color};
12582
12628
  background-color: ${itemNumber2.disabled.backgroundColor};
@@ -12594,18 +12640,18 @@ var ItemText = styled87.div`
12594
12640
  switch (state) {
12595
12641
  case "activeCompleted":
12596
12642
  case "activeIncomplete":
12597
- return css44`
12643
+ return css45`
12598
12644
  color: ${itemText2.active.color};
12599
12645
  text-decoration-color: ${itemText2.active.textDecorationColor};
12600
12646
  `;
12601
12647
  case "inactiveCompleted":
12602
12648
  case "inactiveIncomplete":
12603
- return css44`
12649
+ return css45`
12604
12650
  color: ${itemText2.inactive.color};
12605
12651
  text-decoration-color: ${itemText2.inactive.textDecorationColor};
12606
12652
  `;
12607
12653
  case "disabled":
12608
- return css44`
12654
+ return css45`
12609
12655
  color: ${itemText2.disabled.color};
12610
12656
  text-decoration: ${itemText2.disabled.textDecoration};
12611
12657
  `;
@@ -12629,7 +12675,7 @@ var ItemContentWrapper = styled87.button`
12629
12675
  ${focusVisible}
12630
12676
  }
12631
12677
 
12632
- ${({ $state: state }) => state !== "disabled" && css44`
12678
+ ${({ $state: state }) => state !== "disabled" && css45`
12633
12679
  cursor: pointer;
12634
12680
  `}
12635
12681
  `;
@@ -12649,14 +12695,14 @@ var ProgressTrackerItem = (props) => {
12649
12695
  };
12650
12696
  const stepNumberContent = useMemo(() => {
12651
12697
  if (completed) {
12652
- return /* @__PURE__ */ jsx253(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
12698
+ return /* @__PURE__ */ jsx254(Icon, { icon: CheckIcon, iconSize: itemNumber2.iconSize });
12653
12699
  }
12654
12700
  if (icon12 !== void 0) {
12655
- return /* @__PURE__ */ jsx253(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
12701
+ return /* @__PURE__ */ jsx254(Icon, { icon: icon12, iconSize: itemNumber2.iconSize });
12656
12702
  }
12657
12703
  return index + 1;
12658
12704
  }, [completed, icon12, index]);
12659
- return /* @__PURE__ */ jsx253(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs63(
12705
+ return /* @__PURE__ */ jsx254(ItemWrapper, { "aria-current": active ? "step" : void 0, children: /* @__PURE__ */ jsxs63(
12660
12706
  ItemContentWrapper,
12661
12707
  {
12662
12708
  ...styleProps,
@@ -12664,9 +12710,9 @@ var ProgressTrackerItem = (props) => {
12664
12710
  onClick: !disabled && handleStepChange ? () => handleStepChange(index) : void 0,
12665
12711
  disabled,
12666
12712
  children: [
12667
- /* @__PURE__ */ jsx253(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
12713
+ /* @__PURE__ */ jsx254(ItemNumber, { ...styleProps, "aria-hidden": true, children: stepNumberContent }),
12668
12714
  /* @__PURE__ */ jsxs63(ItemText, { ...styleProps, children: [
12669
- /* @__PURE__ */ jsx253(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
12715
+ /* @__PURE__ */ jsx254(VisuallyHidden, { as: "span", children: getVisuallyHiddenText(active, completed, index) }),
12670
12716
  children
12671
12717
  ] })
12672
12718
  ]
@@ -12676,7 +12722,7 @@ var ProgressTrackerItem = (props) => {
12676
12722
  ProgressTrackerItem.displayName = "ProgressTracker.Item";
12677
12723
 
12678
12724
  // src/components/ProgressTracker/ProgressTracker.tsx
12679
- import { jsx as jsx254, jsxs as jsxs64 } from "react/jsx-runtime";
12725
+ import { jsx as jsx255, jsxs as jsxs64 } from "react/jsx-runtime";
12680
12726
  var ItemsWrapper = styled88.ol`
12681
12727
  display: flex;
12682
12728
  flex-direction: column;
@@ -12705,7 +12751,7 @@ var ProgressTracker = (() => {
12705
12751
  htmlProps,
12706
12752
  ...rest
12707
12753
  } = props;
12708
- const [thisActiveStep, setActiveStep] = useState26(activeStep);
12754
+ const [thisActiveStep, setActiveStep] = useState27(activeStep);
12709
12755
  const handleChange = (step) => {
12710
12756
  setActiveStep(step);
12711
12757
  onStepChange && onStepChange(step);
@@ -12725,14 +12771,14 @@ var ProgressTracker = (() => {
12725
12771
  const itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
12726
12772
  return itemsWithConnectorsBetween;
12727
12773
  }, [children]);
12728
- return /* @__PURE__ */ jsx254(
12774
+ return /* @__PURE__ */ jsx255(
12729
12775
  ProgressTrackerContext.Provider,
12730
12776
  {
12731
12777
  value: {
12732
12778
  activeStep: thisActiveStep,
12733
12779
  handleStepChange: handleChange
12734
12780
  },
12735
- children: /* @__PURE__ */ jsx254("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx254(ItemsWrapper, { children: steps }) })
12781
+ children: /* @__PURE__ */ jsx255("div", { role: "group", "aria-label": "progress", ...containerProps, children: /* @__PURE__ */ jsx255(ItemsWrapper, { children: steps }) })
12736
12782
  }
12737
12783
  );
12738
12784
  });
@@ -12757,7 +12803,7 @@ var intersperseItemsWithConnector = (children) => Children7.map(children, (child
12757
12803
  return child;
12758
12804
  }
12759
12805
  return /* @__PURE__ */ jsxs64(Fragment11, { children: [
12760
- /* @__PURE__ */ jsx254(ProgressTrackerConnector, { "aria-hidden": true }),
12806
+ /* @__PURE__ */ jsx255(ProgressTrackerConnector, { "aria-hidden": true }),
12761
12807
  child
12762
12808
  ] }, index);
12763
12809
  });
@@ -12767,12 +12813,12 @@ import { forwardRef as forwardRef67, useRef as useRef27 } from "react";
12767
12813
 
12768
12814
  // src/components/InlineEdit/InlineEdit.tsx
12769
12815
  import {
12770
- useState as useState27,
12816
+ useState as useState28,
12771
12817
  Children as Children8,
12772
12818
  cloneElement as cloneElement9,
12773
12819
  isValidElement as isValidElement9
12774
12820
  } from "react";
12775
- import { Fragment as Fragment12, jsx as jsx255 } from "react/jsx-runtime";
12821
+ import { Fragment as Fragment12, jsx as jsx256 } from "react/jsx-runtime";
12776
12822
  var InlineEdit = (props) => {
12777
12823
  const {
12778
12824
  emptiable,
@@ -12784,8 +12830,8 @@ var InlineEdit = (props) => {
12784
12830
  inputRef,
12785
12831
  children
12786
12832
  } = props;
12787
- const [editingValue, setEditingValue] = useState27(value != null ? value : "");
12788
- const [isEditing, setIsEditing] = useState27(false);
12833
+ const [editingValue, setEditingValue] = useState28(value != null ? value : "");
12834
+ const [isEditing, setIsEditing] = useState28(false);
12789
12835
  const onChangeHandler = (e) => {
12790
12836
  setEditingValue(e.target.value);
12791
12837
  onChange && onChange();
@@ -12822,7 +12868,7 @@ var InlineEdit = (props) => {
12822
12868
  emptiable
12823
12869
  })
12824
12870
  );
12825
- return /* @__PURE__ */ jsx255(Fragment12, { children: inputChild });
12871
+ return /* @__PURE__ */ jsx256(Fragment12, { children: inputChild });
12826
12872
  };
12827
12873
  InlineEdit.displayName = "InlineEdit";
12828
12874
 
@@ -12830,7 +12876,7 @@ InlineEdit.displayName = "InlineEdit";
12830
12876
  import { forwardRef as forwardRef66, useId as useId23, useRef as useRef26 } from "react";
12831
12877
 
12832
12878
  // src/components/InlineEdit/InlineEdit.styles.tsx
12833
- import styled89, { css as css45 } from "styled-components";
12879
+ import styled89, { css as css46 } from "styled-components";
12834
12880
 
12835
12881
  // src/components/InlineEdit/InlineEdit.tokens.ts
12836
12882
  import { ddsBaseTokens as ddsBaseTokens53 } from "@norges-domstoler/dds-design-tokens";
@@ -12868,7 +12914,7 @@ var StyledInlineInput = styled89(StatefulInput).withConfig({
12868
12914
  background-color: ${inlineEdit2.backgroundColor};
12869
12915
  padding: ${inlineEdit2.padding};
12870
12916
  ${inlineEdit2.font};
12871
- ${({ isEditing, hideIcon }) => !isEditing && !hideIcon && css45`
12917
+ ${({ isEditing, hideIcon }) => !isEditing && !hideIcon && css46`
12872
12918
  padding-left: ${inlineEdit2.withIcon.paddingLeft};
12873
12919
  `}
12874
12920
 
@@ -12907,7 +12953,7 @@ var inlineEditVisuallyHidden = (id, emptiable) => /* @__PURE__ */ jsxs65(Visuall
12907
12953
  ] });
12908
12954
 
12909
12955
  // src/components/InlineEdit/InlineTextArea.tsx
12910
- import { jsx as jsx256, jsxs as jsxs66 } from "react/jsx-runtime";
12956
+ import { jsx as jsx257, jsxs as jsxs66 } from "react/jsx-runtime";
12911
12957
  var InlineTextArea = forwardRef66((props, ref) => {
12912
12958
  const {
12913
12959
  id,
@@ -12929,17 +12975,17 @@ var InlineTextArea = forwardRef66((props, ref) => {
12929
12975
  const combinedRef = useCombinedRef(ref, inputRef);
12930
12976
  return /* @__PURE__ */ jsxs66(OuterInputContainer, { width, children: [
12931
12977
  /* @__PURE__ */ jsxs66(InputContainer, { children: [
12932
- !isEditing && !hideIcon && /* @__PURE__ */ jsx256(
12978
+ !isEditing && !hideIcon && /* @__PURE__ */ jsx257(
12933
12979
  IconWrapper2,
12934
12980
  {
12935
12981
  onClick: () => {
12936
12982
  var _a;
12937
12983
  (_a = inputRef.current) == null ? void 0 : _a.focus();
12938
12984
  },
12939
- children: /* @__PURE__ */ jsx256(Icon, { icon: EditIcon, iconSize: "small" })
12985
+ children: /* @__PURE__ */ jsx257(Icon, { icon: EditIcon, iconSize: "small" })
12940
12986
  }
12941
12987
  ),
12942
- /* @__PURE__ */ jsx256(
12988
+ /* @__PURE__ */ jsx257(
12943
12989
  StyledInlineTextArea,
12944
12990
  {
12945
12991
  ...rest,
@@ -12963,12 +13009,12 @@ var InlineTextArea = forwardRef66((props, ref) => {
12963
13009
  InlineTextArea.displayName = "InlineTextArea";
12964
13010
 
12965
13011
  // src/components/InlineEdit/InlineEditTextArea.tsx
12966
- import { jsx as jsx257 } from "react/jsx-runtime";
13012
+ import { jsx as jsx258 } from "react/jsx-runtime";
12967
13013
  var InlineEditTextArea = forwardRef67((props, ref) => {
12968
13014
  const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
12969
13015
  const textareaRef = useRef27(null);
12970
13016
  const combinedRef = useCombinedRef(ref, textareaRef);
12971
- return /* @__PURE__ */ jsx257(
13017
+ return /* @__PURE__ */ jsx258(
12972
13018
  InlineEdit,
12973
13019
  {
12974
13020
  onSetValue,
@@ -12978,7 +13024,7 @@ var InlineEditTextArea = forwardRef67((props, ref) => {
12978
13024
  onFocus,
12979
13025
  onChange,
12980
13026
  onBlur,
12981
- children: /* @__PURE__ */ jsx257(InlineTextArea, { ref: combinedRef, ...rest })
13027
+ children: /* @__PURE__ */ jsx258(InlineTextArea, { ref: combinedRef, ...rest })
12982
13028
  }
12983
13029
  );
12984
13030
  });
@@ -12988,7 +13034,7 @@ import { forwardRef as forwardRef69, useRef as useRef29 } from "react";
12988
13034
 
12989
13035
  // src/components/InlineEdit/InlineInput.tsx
12990
13036
  import { forwardRef as forwardRef68, useId as useId24, useRef as useRef28 } from "react";
12991
- import { jsx as jsx258, jsxs as jsxs67 } from "react/jsx-runtime";
13037
+ import { jsx as jsx259, jsxs as jsxs67 } from "react/jsx-runtime";
12992
13038
  var InlineInput = forwardRef68(
12993
13039
  (props, ref) => {
12994
13040
  const {
@@ -13013,17 +13059,17 @@ var InlineInput = forwardRef68(
13013
13059
  const combinedRef = useCombinedRef(ref, inputRef);
13014
13060
  return /* @__PURE__ */ jsxs67(OuterInputContainer, { width, children: [
13015
13061
  /* @__PURE__ */ jsxs67(InputContainer, { children: [
13016
- !isEditing && !hideIcon && /* @__PURE__ */ jsx258(
13062
+ !isEditing && !hideIcon && /* @__PURE__ */ jsx259(
13017
13063
  IconWrapper2,
13018
13064
  {
13019
13065
  onClick: () => {
13020
13066
  var _a;
13021
13067
  (_a = inputRef.current) == null ? void 0 : _a.focus();
13022
13068
  },
13023
- children: /* @__PURE__ */ jsx258(Icon, { icon: EditIcon, iconSize: "small" })
13069
+ children: /* @__PURE__ */ jsx259(Icon, { icon: EditIcon, iconSize: "small" })
13024
13070
  }
13025
13071
  ),
13026
- /* @__PURE__ */ jsx258(
13072
+ /* @__PURE__ */ jsx259(
13027
13073
  StyledInlineInput,
13028
13074
  {
13029
13075
  ...rest,
@@ -13049,12 +13095,12 @@ var InlineInput = forwardRef68(
13049
13095
  InlineInput.displayName = "InlineInput";
13050
13096
 
13051
13097
  // src/components/InlineEdit/InlineEditInput.tsx
13052
- import { jsx as jsx259 } from "react/jsx-runtime";
13098
+ import { jsx as jsx260 } from "react/jsx-runtime";
13053
13099
  var InlineEditInput = forwardRef69((props, ref) => {
13054
13100
  const { onSetValue, emptiable, value, onFocus, onChange, onBlur, ...rest } = props;
13055
13101
  const inputRef = useRef29(null);
13056
13102
  const combinedRef = useCombinedRef(ref, inputRef);
13057
- return /* @__PURE__ */ jsx259(
13103
+ return /* @__PURE__ */ jsx260(
13058
13104
  InlineEdit,
13059
13105
  {
13060
13106
  onSetValue,
@@ -13064,13 +13110,13 @@ var InlineEditInput = forwardRef69((props, ref) => {
13064
13110
  onFocus,
13065
13111
  onChange,
13066
13112
  onBlur,
13067
- children: /* @__PURE__ */ jsx259(InlineInput, { ...rest, ref: combinedRef })
13113
+ children: /* @__PURE__ */ jsx260(InlineInput, { ...rest, ref: combinedRef })
13068
13114
  }
13069
13115
  );
13070
13116
  });
13071
13117
 
13072
13118
  // src/components/TextArea/TextArea.tsx
13073
- import { forwardRef as forwardRef70, useEffect as useEffect25, useId as useId25, useRef as useRef30, useState as useState28 } from "react";
13119
+ import { forwardRef as forwardRef70, useEffect as useEffect25, useId as useId25, useRef as useRef30, useState as useState29 } from "react";
13074
13120
  import styled90 from "styled-components";
13075
13121
 
13076
13122
  // src/components/TextArea/TextArea.tokens.tsx
@@ -13084,7 +13130,7 @@ var textAreaTokens = {
13084
13130
  };
13085
13131
 
13086
13132
  // src/components/TextArea/TextArea.tsx
13087
- import { jsx as jsx260, jsxs as jsxs68 } from "react/jsx-runtime";
13133
+ import { jsx as jsx261, jsxs as jsxs68 } from "react/jsx-runtime";
13088
13134
  var defaultWidth5 = "320px";
13089
13135
  var { textarea: textarea2 } = textAreaTokens;
13090
13136
  var StyledTextArea = styled90(StatefulInput)`
@@ -13119,7 +13165,7 @@ var TextArea = forwardRef70(
13119
13165
  const uniqueId = id != null ? id : `${generatedId}-textArea`;
13120
13166
  const textAreaRef = useRef30(null);
13121
13167
  const multiRef = useCombinedRef(ref, textAreaRef);
13122
- const [text, setText] = useState28(
13168
+ const [text, setText] = useState29(
13123
13169
  getDefaultText(value, defaultValue)
13124
13170
  );
13125
13171
  useEffect25(() => {
@@ -13162,8 +13208,8 @@ var TextArea = forwardRef70(
13162
13208
  ...rest
13163
13209
  };
13164
13210
  return /* @__PURE__ */ jsxs68(OuterInputContainer, { ...containerProps, children: [
13165
- hasLabel && /* @__PURE__ */ jsx260(Label, { showRequiredStyling, htmlFor: uniqueId, children: label3 }),
13166
- /* @__PURE__ */ jsx260(StyledTextArea, { ...textAreaProps, as: "textarea" }),
13211
+ hasLabel && /* @__PURE__ */ jsx261(Label, { showRequiredStyling, htmlFor: uniqueId, children: label3 }),
13212
+ /* @__PURE__ */ jsx261(StyledTextArea, { ...textAreaProps, as: "textarea" }),
13167
13213
  renderInputMessage(tip, tipId, errorMessage, errorMessageId)
13168
13214
  ] });
13169
13215
  }
@@ -13171,7 +13217,7 @@ var TextArea = forwardRef70(
13171
13217
  TextArea.displayName = "TextArea";
13172
13218
 
13173
13219
  // src/components/SplitButton/SplitButton.tsx
13174
- import { forwardRef as forwardRef71, useState as useState29 } from "react";
13220
+ import { forwardRef as forwardRef71, useState as useState30 } from "react";
13175
13221
  import styled91 from "styled-components";
13176
13222
 
13177
13223
  // src/components/SplitButton/SplitButton.tokens.ts
@@ -13186,7 +13232,7 @@ var tokens2 = {
13186
13232
  };
13187
13233
 
13188
13234
  // src/components/SplitButton/SplitButton.tsx
13189
- import { jsx as jsx261, jsxs as jsxs69 } from "react/jsx-runtime";
13235
+ import { jsx as jsx262, jsxs as jsxs69 } from "react/jsx-runtime";
13190
13236
  var Container16 = styled91.div`
13191
13237
  display: flex;
13192
13238
  `;
@@ -13225,14 +13271,14 @@ var SplitButton = forwardRef71(
13225
13271
  secondaryActions,
13226
13272
  purpose = "primary"
13227
13273
  } = props;
13228
- const [isOpen, setIsOpen] = useState29(false);
13274
+ const [isOpen, setIsOpen] = useState30(false);
13229
13275
  const buttonStyleProps = {
13230
13276
  appearance: "filled",
13231
13277
  purpose,
13232
13278
  size: size2
13233
13279
  };
13234
13280
  return /* @__PURE__ */ jsxs69(Container16, { ref, children: [
13235
- /* @__PURE__ */ jsx261(
13281
+ /* @__PURE__ */ jsx262(
13236
13282
  MainButton,
13237
13283
  {
13238
13284
  ...buttonStyleProps,
@@ -13241,7 +13287,7 @@ var SplitButton = forwardRef71(
13241
13287
  }
13242
13288
  ),
13243
13289
  /* @__PURE__ */ jsxs69(OverflowMenuGroup, { onToggle: () => setIsOpen(!isOpen), children: [
13244
- /* @__PURE__ */ jsx261(
13290
+ /* @__PURE__ */ jsx262(
13245
13291
  OptionButton,
13246
13292
  {
13247
13293
  ...buttonStyleProps,
@@ -13250,7 +13296,7 @@ var SplitButton = forwardRef71(
13250
13296
  purpose
13251
13297
  }
13252
13298
  ),
13253
- /* @__PURE__ */ jsx261(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
13299
+ /* @__PURE__ */ jsx262(OverflowMenu, { items: secondaryActions, placement: "bottom-end" })
13254
13300
  ] })
13255
13301
  ] });
13256
13302
  }
@@ -13259,7 +13305,7 @@ SplitButton.displayName = "SplitButton";
13259
13305
 
13260
13306
  // src/components/Stack/Stack.tsx
13261
13307
  import { forwardRef as forwardRef72 } from "react";
13262
- import styled92, { css as css46 } from "styled-components";
13308
+ import styled92, { css as css47 } from "styled-components";
13263
13309
 
13264
13310
  // src/components/Stack/Stack.tokens.tsx
13265
13311
  import { ddsBaseTokens as ddsBaseTokens56 } from "@norges-domstoler/dds-design-tokens";
@@ -13283,7 +13329,7 @@ var stackTokens = {
13283
13329
  };
13284
13330
 
13285
13331
  // src/components/Stack/Stack.tsx
13286
- import { jsx as jsx262 } from "react/jsx-runtime";
13332
+ import { jsx as jsx263 } from "react/jsx-runtime";
13287
13333
  var Stack = styled92.div.withConfig({
13288
13334
  shouldForwardProp: (prop) => {
13289
13335
  const styleOnlyProps = [
@@ -13301,11 +13347,11 @@ var Stack = styled92.div.withConfig({
13301
13347
  align-items: ${(props) => props.align};
13302
13348
  justify-content: ${(props) => props.justify};
13303
13349
 
13304
- ${({ gap }) => gap !== void 0 && css46`
13350
+ ${({ gap }) => gap !== void 0 && css47`
13305
13351
  gap: ${gap === 0 ? "0" : stackTokens.spacing[gap]};
13306
13352
  `}
13307
13353
 
13308
- ${({ padding }) => padding !== void 0 && css46`
13354
+ ${({ padding }) => padding !== void 0 && css47`
13309
13355
  padding: ${padding === 0 ? "0" : stackTokens.spacing[padding]};
13310
13356
  `}
13311
13357
  `;
@@ -13314,7 +13360,7 @@ Stack.defaultProps = {
13314
13360
  justify: "flex-start"
13315
13361
  };
13316
13362
  var HStack = forwardRef72(
13317
- ({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx262(
13363
+ ({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx263(
13318
13364
  Stack,
13319
13365
  {
13320
13366
  direction: "horizontal",
@@ -13325,7 +13371,7 @@ var HStack = forwardRef72(
13325
13371
  );
13326
13372
  HStack.displayName = "HStack";
13327
13373
  var VStack = forwardRef72(
13328
- ({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx262(
13374
+ ({ id, className, htmlProps, ...rest }, ref) => /* @__PURE__ */ jsx263(
13329
13375
  Stack,
13330
13376
  {
13331
13377
  direction: "vertical",
@@ -13373,7 +13419,7 @@ var errorsTokens = {
13373
13419
  };
13374
13420
 
13375
13421
  // src/components/FileUploader/ErrorList.tsx
13376
- import { jsx as jsx263 } from "react/jsx-runtime";
13422
+ import { jsx as jsx264 } from "react/jsx-runtime";
13377
13423
  var MessageContainer2 = styled93.div`
13378
13424
  display: flex;
13379
13425
  flex-direction: column;
@@ -13384,8 +13430,8 @@ var ErrorList = (props) => {
13384
13430
  if (errors.length < 1) {
13385
13431
  return null;
13386
13432
  }
13387
- return /* @__PURE__ */ jsx263(MessageContainer2, { children: errors.map(({ id, message: message2 }) => {
13388
- return /* @__PURE__ */ jsx263(
13433
+ return /* @__PURE__ */ jsx264(MessageContainer2, { children: errors.map(({ id, message: message2 }) => {
13434
+ return /* @__PURE__ */ jsx264(
13389
13435
  InputMessage,
13390
13436
  {
13391
13437
  id,
@@ -13399,7 +13445,7 @@ var ErrorList = (props) => {
13399
13445
 
13400
13446
  // src/components/FileUploader/File.tsx
13401
13447
  import styled94 from "styled-components";
13402
- import { jsx as jsx264, jsxs as jsxs70 } from "react/jsx-runtime";
13448
+ import { jsx as jsx265, jsxs as jsxs70 } from "react/jsx-runtime";
13403
13449
  var FileWrapper = styled94.li``;
13404
13450
  var FileNameWrapper = styled94.span`
13405
13451
  word-break: break-all;
@@ -13427,8 +13473,8 @@ var File = (props) => {
13427
13473
  }));
13428
13474
  return /* @__PURE__ */ jsxs70(FileWrapper, { children: [
13429
13475
  /* @__PURE__ */ jsxs70(FileElement, { ...props, children: [
13430
- /* @__PURE__ */ jsx264(FileNameWrapper, { children: stateFile.file.name }),
13431
- /* @__PURE__ */ jsx264(
13476
+ /* @__PURE__ */ jsx265(FileNameWrapper, { children: stateFile.file.name }),
13477
+ /* @__PURE__ */ jsx265(
13432
13478
  RemoveFileButton,
13433
13479
  {
13434
13480
  size: "small",
@@ -13448,7 +13494,7 @@ var File = (props) => {
13448
13494
  }
13449
13495
  )
13450
13496
  ] }),
13451
- /* @__PURE__ */ jsx264(ErrorList, { errors: errorsList })
13497
+ /* @__PURE__ */ jsx265(ErrorList, { errors: errorsList })
13452
13498
  ] }, stateFile.file.name);
13453
13499
  };
13454
13500
 
@@ -13727,7 +13773,7 @@ var useFileUploader = (props) => {
13727
13773
  };
13728
13774
 
13729
13775
  // src/components/FileUploader/FileUploader.tsx
13730
- import { jsx as jsx265, jsxs as jsxs71 } from "react/jsx-runtime";
13776
+ import { jsx as jsx266, jsxs as jsxs71 } from "react/jsx-runtime";
13731
13777
  var defaultWidth6 = "320px";
13732
13778
  var Wrapper8 = styled95.div`
13733
13779
  width: ${({ width }) => width ? width : defaultWidth6};
@@ -13787,7 +13833,7 @@ var FileUploader = (props) => {
13787
13833
  const hasRootErrors = rootErrors.length > 0;
13788
13834
  const showRequiredMarker = required;
13789
13835
  const tipId = derivativeIdGenerator(uniqueId, "tip");
13790
- const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx265(
13836
+ const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx266(
13791
13837
  File,
13792
13838
  {
13793
13839
  parentId: uniqueId,
@@ -13803,8 +13849,8 @@ var FileUploader = (props) => {
13803
13849
  message: e
13804
13850
  }));
13805
13851
  return /* @__PURE__ */ jsxs71(Wrapper8, { width, children: [
13806
- hasLabel && /* @__PURE__ */ jsx265(Label, { showRequiredStyling: showRequiredMarker, htmlFor: uniqueId, children: label3 }),
13807
- hasTip && /* @__PURE__ */ jsx265(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
13852
+ hasLabel && /* @__PURE__ */ jsx266(Label, { showRequiredStyling: showRequiredMarker, htmlFor: uniqueId, children: label3 }),
13853
+ hasTip && /* @__PURE__ */ jsx266(InputMessage, { id: tipId, message: tip, messageType: "tip" }),
13808
13854
  /* @__PURE__ */ jsxs71(
13809
13855
  Root,
13810
13856
  {
@@ -13812,11 +13858,11 @@ var FileUploader = (props) => {
13812
13858
  $isDragActive: isDragActive,
13813
13859
  $hasRootErrors: hasRootErrors,
13814
13860
  children: [
13815
- /* @__PURE__ */ jsx265(FileUploaderInput, { ...getInputProps() }),
13861
+ /* @__PURE__ */ jsx266(FileUploaderInput, { ...getInputProps() }),
13816
13862
  "Dra og slipp filer her eller",
13817
13863
  " ",
13818
- /* @__PURE__ */ jsx265(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
13819
- /* @__PURE__ */ jsx265(
13864
+ /* @__PURE__ */ jsx266(VisuallyHidden, { as: "span", children: "velg fil med p\xE5f\xF8lgende knapp" }),
13865
+ /* @__PURE__ */ jsx266(
13820
13866
  Button,
13821
13867
  {
13822
13868
  ...getButtonProps(),
@@ -13839,8 +13885,8 @@ var FileUploader = (props) => {
13839
13885
  ]
13840
13886
  }
13841
13887
  ),
13842
- /* @__PURE__ */ jsx265(ErrorList, { errors: rootErrorsList }),
13843
- /* @__PURE__ */ jsx265(FileListElement, { children: fileListElements })
13888
+ /* @__PURE__ */ jsx266(ErrorList, { errors: rootErrorsList }),
13889
+ /* @__PURE__ */ jsx266(FileListElement, { children: fileListElements })
13844
13890
  ] });
13845
13891
  };
13846
13892
  FileUploader.displayName = "FileUploader";
@@ -13848,7 +13894,7 @@ FileUploader.displayName = "FileUploader";
13848
13894
  // src/components/EmptyContent/EmptyContent.tsx
13849
13895
  import { ddsBaseTokens as ddsBaseTokens58 } from "@norges-domstoler/dds-design-tokens";
13850
13896
  import styled96 from "styled-components";
13851
- import { jsx as jsx266, jsxs as jsxs72 } from "react/jsx-runtime";
13897
+ import { jsx as jsx267, jsxs as jsxs72 } from "react/jsx-runtime";
13852
13898
  var { colors: colors35, spacing: spacing39 } = ddsBaseTokens58;
13853
13899
  var StyledEmptyContent = styled96.div`
13854
13900
  display: flex;
@@ -13868,9 +13914,9 @@ var StyledEmptyContentText = styled96.div`
13868
13914
  gap: ${spacing39.SizesDdsSpacingX1};
13869
13915
  `;
13870
13916
  function EmptyContent({ title: title3, message: message2, ...rest }) {
13871
- return /* @__PURE__ */ jsx266(StyledEmptyContent, { ...rest, children: /* @__PURE__ */ jsxs72(StyledEmptyContentText, { children: [
13872
- title3 && /* @__PURE__ */ jsx266(Typography, { typographyType: "headingSans02", children: title3 }),
13873
- /* @__PURE__ */ jsx266(Typography, { typographyType: "bodySans02", children: message2 })
13917
+ return /* @__PURE__ */ jsx267(StyledEmptyContent, { ...rest, children: /* @__PURE__ */ jsxs72(StyledEmptyContentText, { children: [
13918
+ title3 && /* @__PURE__ */ jsx267(Typography, { typographyType: "headingSans02", children: title3 }),
13919
+ /* @__PURE__ */ jsx267(Typography, { typographyType: "bodySans02", children: message2 })
13874
13920
  ] }) });
13875
13921
  }
13876
13922
  EmptyContent.displayName = "EmptyContent";
@@ -13894,7 +13940,7 @@ var backLinkTokens = {
13894
13940
  };
13895
13941
 
13896
13942
  // src/components/BackLink/BackLink.tsx
13897
- import { jsx as jsx267, jsxs as jsxs73 } from "react/jsx-runtime";
13943
+ import { jsx as jsx268, jsxs as jsxs73 } from "react/jsx-runtime";
13898
13944
  var Nav2 = styled97("nav")`
13899
13945
  align-items: center;
13900
13946
  display: flex;
@@ -13905,23 +13951,23 @@ var StyledIcon4 = styled97(Icon)`
13905
13951
  `;
13906
13952
  var BackLink = forwardRef73((props, ref) => {
13907
13953
  return /* @__PURE__ */ jsxs73(Nav2, { ref, children: [
13908
- /* @__PURE__ */ jsx267(StyledIcon4, { icon: icons_exports.ArrowLeftIcon, iconSize: "small" }),
13909
- /* @__PURE__ */ jsx267(Typography, { typographyType: "a", href: props.href, children: props.label })
13954
+ /* @__PURE__ */ jsx268(StyledIcon4, { icon: icons_exports.ArrowLeftIcon, iconSize: "small" }),
13955
+ /* @__PURE__ */ jsx268(Typography, { typographyType: "a", href: props.href, children: props.label })
13910
13956
  ] });
13911
13957
  });
13912
13958
  BackLink.displayName = "BackLink";
13913
13959
 
13914
13960
  // src/components/Feedback/Feedback.tsx
13915
- import { useEffect as useEffect27, useState as useState30 } from "react";
13961
+ import { useEffect as useEffect27, useState as useState31 } from "react";
13916
13962
 
13917
13963
  // src/components/Feedback/RatingComponent.tsx
13918
- import styled98, { css as css47 } from "styled-components";
13964
+ import styled98, { css as css48 } from "styled-components";
13919
13965
  import { ddsBaseTokens as ddsBaseTokens60 } from "@norges-domstoler/dds-design-tokens";
13920
- import { jsx as jsx268, jsxs as jsxs74 } from "react/jsx-runtime";
13966
+ import { jsx as jsx269, jsxs as jsxs74 } from "react/jsx-runtime";
13921
13967
  var RatingContainer = styled98.div`
13922
13968
  display: flex;
13923
13969
  gap: ${ddsBaseTokens60.spacing.SizesDdsSpacingX1};
13924
- ${({ $layout }) => css47`
13970
+ ${({ $layout }) => css48`
13925
13971
  flex-direction: ${$layout === "horizontal" ? "row" : "column"};
13926
13972
  align-items: ${$layout === "horizontal" ? "center" : "start"};
13927
13973
  `}
@@ -13939,9 +13985,9 @@ var RatingComponent = ({
13939
13985
  handleRatingChange
13940
13986
  }) => {
13941
13987
  return /* @__PURE__ */ jsxs74(RatingContainer, { $layout: layout, children: [
13942
- /* @__PURE__ */ jsx268(Label, { children: ratingLabel }),
13943
- loading ? /* @__PURE__ */ jsx268(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs74(HStack, { gap: "x1", children: [
13944
- /* @__PURE__ */ jsx268(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ jsx268(
13988
+ /* @__PURE__ */ jsx269(Label, { children: ratingLabel }),
13989
+ loading ? /* @__PURE__ */ jsx269(Spinner, { tooltip: "Laster opp tilbakemelding ..." }) : /* @__PURE__ */ jsxs74(HStack, { gap: "x1", children: [
13990
+ /* @__PURE__ */ jsx269(Tooltip, { text: thumbUpTooltip, children: /* @__PURE__ */ jsx269(
13945
13991
  RatingButton,
13946
13992
  {
13947
13993
  htmlProps: { "aria-label": thumbUpTooltip },
@@ -13951,7 +13997,7 @@ var RatingComponent = ({
13951
13997
  size: "large"
13952
13998
  }
13953
13999
  ) }),
13954
- /* @__PURE__ */ jsx268(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx268("div", { children: /* @__PURE__ */ jsx268(
14000
+ /* @__PURE__ */ jsx269(Tooltip, { text: thumbDownTooltip, children: /* @__PURE__ */ jsx269("div", { children: /* @__PURE__ */ jsx269(
13955
14001
  RatingButton,
13956
14002
  {
13957
14003
  htmlProps: { "aria-label": thumbDownTooltip },
@@ -13968,7 +14014,7 @@ var RatingComponent = ({
13968
14014
  // src/components/Feedback/CommentComponent.tsx
13969
14015
  import styled99 from "styled-components";
13970
14016
  import { ddsBaseTokens as ddsBaseTokens61 } from "@norges-domstoler/dds-design-tokens";
13971
- import { jsx as jsx269, jsxs as jsxs75 } from "react/jsx-runtime";
14017
+ import { jsx as jsx270, jsxs as jsxs75 } from "react/jsx-runtime";
13972
14018
  var IconLabelSpan = styled99.span`
13973
14019
  display: inline-flex;
13974
14020
  align-items: center;
@@ -13986,7 +14032,7 @@ var CommentComponent = ({
13986
14032
  }) => {
13987
14033
  return /* @__PURE__ */ jsxs75(VStack, { gap: "x1", align: "flex-start", children: [
13988
14034
  /* @__PURE__ */ jsxs75(IconLabelSpan, { children: [
13989
- /* @__PURE__ */ jsx269(
14035
+ /* @__PURE__ */ jsx270(
13990
14036
  Icon,
13991
14037
  {
13992
14038
  icon: rating === "positive" ? ThumbupFilled : ThumbdownFilled,
@@ -13998,7 +14044,7 @@ var CommentComponent = ({
13998
14044
  " "
13999
14045
  ] })
14000
14046
  ] }),
14001
- /* @__PURE__ */ jsx269(
14047
+ /* @__PURE__ */ jsx270(
14002
14048
  TextArea,
14003
14049
  {
14004
14050
  value: feedbackText,
@@ -14007,7 +14053,7 @@ var CommentComponent = ({
14007
14053
  tip: "Ikke send inn personopplysninger eller annen sensitiv informasjon"
14008
14054
  }
14009
14055
  ),
14010
- /* @__PURE__ */ jsx269(
14056
+ /* @__PURE__ */ jsx270(
14011
14057
  Button,
14012
14058
  {
14013
14059
  purpose: "secondary",
@@ -14021,7 +14067,7 @@ var CommentComponent = ({
14021
14067
  };
14022
14068
 
14023
14069
  // src/components/Feedback/Feedback.tsx
14024
- import { jsx as jsx270 } from "react/jsx-runtime";
14070
+ import { jsx as jsx271 } from "react/jsx-runtime";
14025
14071
  var Feedback = ({
14026
14072
  layout = "vertical",
14027
14073
  ratingLabel = "Hva syns du om tjenesten?",
@@ -14040,9 +14086,9 @@ var Feedback = ({
14040
14086
  onFeedbackTextChange,
14041
14087
  onSubmit
14042
14088
  }) => {
14043
- const [rating, setRating] = useState30(null);
14044
- const [feedbackText, setFeedbackText] = useState30();
14045
- const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState30(false);
14089
+ const [rating, setRating] = useState31(null);
14090
+ const [feedbackText, setFeedbackText] = useState31();
14091
+ const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState31(false);
14046
14092
  useEffect27(() => {
14047
14093
  ratingProp !== void 0 && setRating(ratingProp);
14048
14094
  }, [ratingProp]);
@@ -14066,7 +14112,7 @@ var Feedback = ({
14066
14112
  isSubmittedProp === void 0 && setIsFeedbackSubmitted(true);
14067
14113
  };
14068
14114
  if (rating === null && !isFeedbackSubmitted) {
14069
- return /* @__PURE__ */ jsx270(
14115
+ return /* @__PURE__ */ jsx271(
14070
14116
  RatingComponent,
14071
14117
  {
14072
14118
  layout,
@@ -14079,7 +14125,7 @@ var Feedback = ({
14079
14125
  );
14080
14126
  }
14081
14127
  if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
14082
- return /* @__PURE__ */ jsx270(
14128
+ return /* @__PURE__ */ jsx271(
14083
14129
  CommentComponent,
14084
14130
  {
14085
14131
  rating,
@@ -14093,7 +14139,7 @@ var Feedback = ({
14093
14139
  }
14094
14140
  );
14095
14141
  }
14096
- return /* @__PURE__ */ jsx270(Paragraph, { children: submittedTitle });
14142
+ return /* @__PURE__ */ jsx271(Paragraph, { children: submittedTitle });
14097
14143
  };
14098
14144
  export {
14099
14145
  AddressShieldedIcon,