@altinn/altinn-components 0.10.4 → 0.11.0

package/README.md

@@ -50,4 +50,14 @@ for correct `font-family` and minimal collection of resets.
 
 
 ## Documentation
-The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)
+The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)  
+Components are decorated with tags to show the current status of the component. 
+
+The tags are:
+- `@outdated` - The component is out of sync with latest design.
+- `@beta` - The component is in beta and is more likely to have flaws or missing features.
+- `@experimental` - The component is experimental and is work in progress. Recommended not to use.
+- `@deprecated` - The component is deprecated and should not be used.
+
+The main motivation behind having tags is relieving the pressure of having to make everything stable before releasing it for use. 
+It also allows us to get feedback on the components in an early stage.

package/dist/assets/Breadcrumbs.css

@@ -0,0 +1 @@
+._list_8q7kr_1{list-style:none;padding:0;margin:0;margin:.625rem 0;text-indent:0;display:flex;align-items:center;flex-wrap:wrap}._item_8q7kr_12{display:flex;align-items:center;color:var(--theme-text-subtle)}._icon_8q7kr_18{font-size:1.5rem;margin:0 .25rem}

package/dist/assets/BreadcrumbsLink.css

@@ -0,0 +1 @@
+._link_znbj7_1{white-space:nowrap;padding:0;margin:0;background:none;border:0;color:inherit;font:inherit;text-align:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;font-size:1rem}a._link_znbj7_1,button._link_znbj7_1{color:var(--theme-text-subtle);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;cursor:pointer}a._link_znbj7_1:hover,button._link_znbj7_1:hover{color:var(--theme-text-default)}

package/dist/assets/FieldBase.css

@@ -0,0 +1 @@
+._field_5tnbv_1{display:flex;flex-direction:column;row-gap:.25rem}._label_5tnbv_7{color:var(--theme-text-default)}._helperText_5tnbv_11{color:var(--theme-text-subtle)}

package/dist/assets/Flex.css

@@ -0,0 +1 @@
+._flex_18d8p_1{display:flex}._flex_18d8p_1[data-direction=col]{flex-direction:column}._flex_18d8p_1[data-direction=row]{flex-direction:row}._flex_18d8p_1[data-align=center]{align-items:center}._flex_18d8p_1[data-align=start]{align-items:flex-start}._flex_18d8p_1[data-align=end]{align-items:flex-end}._flex_18d8p_1[data-justify=start]{justify-content:flex-start}._flex_18d8p_1[data-justify=end]{justify-content:flex-end}._flex_18d8p_1[data-justify=center]{justify-content:center}._flex_18d8p_1[data-justify=between]{justify-content:space-between}._flex_18d8p_1[data-spacing=xs]{gap:.25rem}._flex_18d8p_1[data-spacing=sm]{gap:.5rem}._flex_18d8p_1[data-spacing=md]{gap:.75rem}._flex_18d8p_1[data-spacing=lg]{gap:1rem}._flex_18d8p_1[data-spacing=xl]{gap:1.5rem}@media (max-width: 1024px){._flex_18d8p_1[data-inset=true]{margin-left:-1rem;margin-right:-1rem}}._flex_18d8p_1[data-padding=xs]{padding:.25rem}._flex_18d8p_1[data-padding=sm]{padding:.5rem}._flex_18d8p_1[data-padding=md]{padding:.75rem}._flex_18d8p_1[data-padding=lg]{padding:1rem}._flex_18d8p_1[data-padding=xl]{padding:1.5rem}@media (max-width: 1024px){._flex_18d8p_1[data-padding=xl]{padding:1.5rem 1rem}}._flex_18d8p_1[data-margin=xs]{margin:.25rem 0}._flex_18d8p_1[data-margin=sm]{margin:.5rem 0}._flex_18d8p_1[data-margin=md]{margin:.625rem 0}._flex_18d8p_1[data-margin=lg]{margin:1.125rem 0}._flex_18d8p_1[data-color=subtle]{background-color:var(--theme-background-default)}._flex_18d8p_1[data-color=surface]{background-color:var(--theme-surface-default)}._flex_18d8p_1[data-color=accent]{background-color:var(--theme-base-default)}._flex_18d8p_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._flex_18d8p_1[data-shadow=sm]{box-shadow:var(--ds-shadow-sm)}._flex_18d8p_1[data-shadow=md]{box-shadow:var(--ds-shadow-md)}._flex_18d8p_1[data-shadow=lg]{box-shadow:var(--ds-shadow-lg)}._flex_18d8p_1[data-shadow=xl]{box-shadow:var(--ds-shadow-xl)}

package/dist/assets/Grid.css

@@ -0,0 +1 @@
+._grid_o95ym_1{display:grid}._grid_o95ym_1[data-cols="1-2-3"]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width: 640px){._grid_o95ym_1[data-cols="1-2-3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){._grid_o95ym_1[data-cols="1-2-3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}._grid_o95ym_1[data-spacing=xs]{gap:.25rem}._grid_o95ym_1[data-spacing=sm]{gap:.5rem}._grid_o95ym_1[data-spacing=md]{gap:.75rem}._grid_o95ym_1[data-spacing=lg]{gap:1rem}._grid_o95ym_1[data-spacing=xl]{gap:1.5rem}

package/dist/assets/Heading.css

@@ -1 +1 @@
-._heading_15ax1_1{margin:0}._heading_15ax1_1[data-weight=normal]{font-weight:400}._heading_15ax1_1[data-weight=medium]{font-weight:500}._heading_15ax1_1[data-weight=bold]{font-weight:600}._heading_15ax1_1[data-size=xs]{font-size:.875rem;line-height:1.5rem}._heading_15ax1_1[data-size=sm]{font-size:1.125rem;line-height:1.5rem}._heading_15ax1_1[data-size=md]{font-size:1.25rem;font-weight:500;line-height:1.5rem}._heading_15ax1_1[data-size=lg]{font-size:1.5rem;font-weight:500;line-height:1.25}
+._heading_mt0g8_1{margin:0}._heading_mt0g8_1[data-weight=normal]{font-weight:400}._heading_mt0g8_1[data-weight=medium]{font-weight:500}._heading_mt0g8_1[data-weight=bold]{font-weight:600}._heading_mt0g8_1[data-size=xs]{font-size:.875rem;line-height:1.5rem}._heading_mt0g8_1[data-size=sm]{font-size:1rem;line-height:1.5rem}._heading_mt0g8_1[data-size=md]{font-size:1.125rem;line-height:1.5rem}._heading_mt0g8_1[data-size=lg]{font-size:1.25rem;line-height:1.25}._heading_mt0g8_1[data-size=xl]{font-size:1.5rem;line-height:1.25}

package/dist/assets/InputBase.css

@@ -0,0 +1 @@
+._input_dxhtf_1{border:1px solid;border-color:transparent;margin:0;padding:0;width:100%;overflow:visible;background:transparent;text-decoration:none;color:inherit;font:inherit;text-align:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit}._input_dxhtf_1{border-color:var(--theme-border-default);border-radius:2px}._input_dxhtf_1:disabled{opacity:.5;pointer-events:none}._input_dxhtf_1:focus{border-color:var(--theme-base-active)}._input_dxhtf_1[data-size=xs]{height:1.5rem}._input_dxhtf_1[data-size=sm]{height:2.25rem;padding:0 .5rem}._input_dxhtf_1[data-size=md]{height:2.75rem;padding:0 .75rem}._input_dxhtf_1[data-size=lg]{height:3.5rem;padding:0 1rem}

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_1grve_1{position:relative;width:100%;display:flex;flex-direction:column}._item_1grve_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_1grve_1[data-variant=outline],._item_1grve_1[data-variant=dotted]{outline-color:var(--theme-base-default)}._item_1grve_1[data-variant=outline]{outline-style:solid}._item_1grve_1[data-variant=dotted]{outline-style:dashed}._item_1grve_1[data-color=neutral]{background-color:var(--theme-background-default)}._item_1grve_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_1grve_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._item_1grve_1[data-active=true]{background-color:var(--theme-surface-default)}._item_1grve_1[aria-expanded=true],._item_1grve_1[aria-selected=true]{outline:2px solid}._item_1grve_1[aria-disabled=true]{pointer-events:none}._item_1grve_1:not([aria-selected=true]):hover,._item_1grve_1:not([aria-disabled=true]):hover{outline:2px solid var(--theme-border-strong)}
+._item_7qmbp_1{position:relative;width:100%;display:flex;flex-direction:column}._item_7qmbp_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_7qmbp_1[data-variant=outline],._item_7qmbp_1[data-variant=dotted]{outline-color:var(--theme-base-default)}._item_7qmbp_1[data-variant=outline]{outline-style:solid}._item_7qmbp_1[data-variant=dotted]{outline-style:dashed}._item_7qmbp_1[data-color=neutral]{background-color:var(--theme-background-default)}._item_7qmbp_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_7qmbp_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._item_7qmbp_1[data-active=true]{background-color:var(--theme-surface-default)}._item_7qmbp_1[aria-expanded=true],._item_7qmbp_1[aria-selected=true]{outline:2px solid}._item_7qmbp_1:not([aria-selected=true]):hover,._item_7qmbp_1:not([aria-disabled=true]):hover{outline:2px solid var(--theme-border-strong)}._item_7qmbp_1[aria-disabled=true]{pointer-events:none}

package/dist/assets/ListItemHeader.css

@@ -1 +1 @@
-._header_16s1f_1{position:relative;width:100%;display:flex;align-items:center}._link_16s1f_8{flex-grow:1;display:flex;align-items:center;column-gap:.625rem;padding:.325rem .625rem}._link_16s1f_8[data-size=xs]{min-height:44px}._link_16s1f_8[data-size=sm]{min-height:52px}._link_16s1f_8[data-size=md]{min-height:60px;padding:.5rem .75rem;column-gap:.75rem}._link_16s1f_8[data-size=lg]{min-height:64px;padding:.5rem .875rem;column-gap:.875rem}._link_16s1f_8[data-size=xl]{min-height:72px;padding:.75rem 1rem;column-gap:1rem}
+._header_10vuh_1{position:relative;width:100%;display:flex;align-items:center}._link_10vuh_8{flex-grow:1;display:flex;align-items:center;padding:.5rem;column-gap:.5rem}._link_10vuh_8[data-size=xs]{min-height:44px}._link_10vuh_8[data-size=sm]{min-height:52px}._link_10vuh_8[data-size=md]{min-height:60px;padding:.625rem;column-gap:.625rem}._link_10vuh_8[data-size=lg]{min-height:64px;padding:.75rem;column-gap:.75rem}._link_10vuh_8[data-size=xl]{min-height:72px;padding:1rem;column-gap:1rem}._controls_10vuh_42{margin-right:.5rem}

package/dist/assets/ListItemLabel.css

@@ -1 +1 @@
-._label_5sijq_3{width:100%}._label_5sijq_3[data-size=xs]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}._label_5sijq_3[data-size=sm],._label_5sijq_3[data-size=md],._label_5sijq_3[data-size=lg],._label_5sijq_3[data-size=xl]{display:flex;flex-direction:column;row-gap:.125rem}._title_5sijq_27{display:inline;font-weight:600;line-height:1.25;margin:0}._description_5sijq_34{display:inline;font-weight:400;line-height:1.125;color:var(--theme-text-subtle);margin:0}._title_5sijq_27[data-size=xs],._title_5sijq_27[data-size=sm]{font-size:1rem}._title_5sijq_27[data-size=md],._title_5sijq_27[data-size=lg]{font-size:1.125rem}._title_5sijq_27[data-size=xl]{font-size:1.25rem}._description_5sijq_34[data-size=xs],._description_5sijq_34[data-size=sm],._description_5sijq_34[data-size=md],._description_5sijq_34[data-size=lg]{font-size:.875rem;line-height:1rem}._description_5sijq_34[data-size=xl]{font-size:1rem}
+._label_eum9r_3{width:100%}._label_eum9r_3[data-size=xs]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}._label_eum9r_3[data-size=sm],._label_eum9r_3[data-size=md],._label_eum9r_3[data-size=lg],._label_eum9r_3[data-size=xl]{display:flex;flex-direction:column;row-gap:.125rem}._label_eum9r_3[data-size=xs],._label_eum9r_3[data-size=sm],._label_eum9r_3[data-size=md]{font-size:1rem}._label_eum9r_3[data-size=lg],._label_eum9r_3[data-size=xl]{font-size:1.125rem}._title_eum9r_41{display:inline;font-size:1em;font-weight:600;line-height:1.125;margin:0}._description_eum9r_49{display:inline;font-weight:400;line-height:1.125;color:var(--theme-text-subtle);margin:0}._description_eum9r_49[data-size=xs],._description_eum9r_49[data-size=sm],._description_eum9r_49[data-size=md],._description_eum9r_49[data-size=lg],._description_eum9r_49[data-size=xl]{font-size:.875rem;line-height:1rem}

package/dist/assets/MenuItemMedia.css

@@ -1 +1 @@
-._media_1n26h_1{flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:5%;width:2rem;height:2rem}._media_1n26h_1[data-size=lg]{width:44px;height:44px}._media_1n26h_1[data-size=xs]{width:1.5rem;height:1.5rem}._media_1n26h_1[data-size=xs] ._icon_1n26h_21{font-size:1.25rem}._icon_1n26h_21{font-size:1.5rem}._media_1n26h_1[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_1n26h_1[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}._media_1n26h_1[data-color=company]{background-color:var(--company-surface-default);color:var(--company-text-default)}._media_1n26h_1[data-color=person]{background-color:var(--person-surface-default);color:var(--person-text-default)}
+._media_1kkjg_1{flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:5%;width:2rem;height:2rem}._media_1kkjg_1[data-size=lg]{width:44px;height:44px}._media_1kkjg_1[data-size=xs]{width:1.5rem;height:1.5rem}._media_1kkjg_1[data-size=xs] ._icon_1kkjg_21{font-size:1.25rem}._icon_1kkjg_21{font-size:1.5rem}._media_1kkjg_1[data-color=subtle]{background-color:var(--theme-background-default);color:var(--theme-text-default)}._media_1kkjg_1[data-color=surface]{background-color:var(--theme-surface-default);color:var(--theme-text-default)}._media_1kkjg_1[data-color=strong]{background-color:var(--theme-base-default);color:var(--theme-background-default)}._media_1kkjg_1[data-color=company]{background-color:var(--company-surface-default);color:var(--company-text-default)}._media_1kkjg_1[data-color=person]{background-color:var(--person-surface-default);color:var(--person-text-default)}

package/dist/assets/QueryLabel.css

@@ -1 +1 @@
-._label_1q65r_1{display:flex;flex-wrap:wrap;align-items:center;column-gap:.25rem;row-gap:.25rem}._group_1q65r_9{display:inline-flex;align-items:center;column-gap:.25rem}._plus_1q65r_15{color:var(--theme-text-subtle)}._item_1q65r_19{font-size:.875em;display:block;overflow:hidden}._item_1q65r_19[data-type=search]{background-color:transparent;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}._item_1q65r_19[data-type=search]:before{content:"«"}._item_1q65r_19[data-type=search]:after{content:"»"}._item_1q65r_19[data-type=filter]{background-color:transparent;border:1px solid;font-weight:500;padding:.25em .5em;border-radius:2px}
+._label_1sssm_1{display:flex;flex-wrap:wrap;align-items:center;column-gap:.25rem;row-gap:.25rem}._group_1sssm_9{display:inline-flex;align-items:center;column-gap:.25rem}._plus_1sssm_15{color:var(--theme-text-subtle)}._item_1sssm_19{font-size:.875em;display:block;overflow:hidden}._item_1sssm_19[data-type=search]{background-color:transparent;font-weight:500;border-bottom:1px solid;padding:.25em 0}._item_1sssm_19[data-type=search]:before{content:"«"}._item_1sssm_19[data-type=search]:after{content:"»"}._item_1sssm_19[data-type=filter]{background-color:transparent;border:1px solid;font-weight:500;padding:.25em .5em;border-radius:2px}

package/dist/assets/Section.css

@@ -1 +1 @@
-._section_1qkfl_1{display:flex}._section_1qkfl_1[data-flex=col]{flex-direction:column}._section_1qkfl_1[data-flex=row]{flex-direction:row}._section_1qkfl_1[data-align=center]{align-items:center}._section_1qkfl_1[data-align=start]{align-items:flex-start}._section_1qkfl_1[data-align=end]{align-items:flex-end}._section_1qkfl_1[data-justify=start]{justify-content:flex-start}._section_1qkfl_1[data-justify=end]{justify-content:flex-end}._section_1qkfl_1[data-justify=center]{justify-content:center}._section_1qkfl_1[data-justify=between]{justify-content:space-between}@media (max-width: 1024px){._section_1qkfl_1[data-inset=true]{margin-left:-1rem;margin-right:-1rem}}._section_1qkfl_1[data-padding=xs]{padding:.25rem}._section_1qkfl_1[data-padding=sm]{padding:.5rem}._section_1qkfl_1[data-padding=md]{padding:.75rem}._section_1qkfl_1[data-padding=lg]{padding:1rem}._section_1qkfl_1[data-padding=xl]{padding:1.5rem}@media (max-width: 1024px){._section_1qkfl_1[data-padding=xl]{padding:1.5rem 1rem}}._section_1qkfl_1[data-spacing=xs]{gap:.25rem}._section_1qkfl_1[data-spacing=sm]{gap:.5rem}._section_1qkfl_1[data-spacing=md]{gap:.75rem}._section_1qkfl_1[data-spacing=lg]{gap:1rem}._section_1qkfl_1[data-spacing=xl]{gap:1.5rem}._section_1qkfl_1[data-margin=xs]{margin:.25rem 0}._section_1qkfl_1[data-margin=sm]{margin:.5rem 0}._section_1qkfl_1[data-margin=md]{margin:.75rem 0}._section_1qkfl_1[data-margin=lg]{margin:1rem 0}._section_1qkfl_1[data-margin=lg]{margin:1.5rem 0}._section_1qkfl_1[data-color=subtle]{background-color:var(--theme-background-default)}._section_1qkfl_1[data-color=surface]{background-color:var(--theme-surface-default)}._section_1qkfl_1[data-color=accent]{background-color:var(--theme-base-default)}._section_1qkfl_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._section_1qkfl_1[data-shadow=sm]{box-shadow:var(--ds-shadow-sm)}._section_1qkfl_1[data-shadow=md]{box-shadow:var(--ds-shadow-md)}._section_1qkfl_1[data-shadow=lg]{box-shadow:var(--ds-shadow-lg)}._section_1qkfl_1[data-shadow=xl]{box-shadow:var(--ds-shadow-xl)}
+._section_167jj_1[data-bg=subtle]{background-color:var(--theme-background-default)}._section_167jj_1[data-bg=surface]{background-color:var(--theme-surface-default)}._section_167jj_1[data-bg=accent]{background-color:var(--theme-base-default)}._section_167jj_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._section_167jj_1[data-shadow=sm]{box-shadow:var(--ds-shadow-sm)}._section_167jj_1[data-shadow=md]{box-shadow:var(--ds-shadow-md)}._section_167jj_1[data-shadow=lg]{box-shadow:var(--ds-shadow-lg)}._section_167jj_1[data-shadow=xl]{box-shadow:var(--ds-shadow-xl)}

package/dist/assets/Typography.css

@@ -1 +1 @@
-._typography_19j8u_1{width:100%;max-width:45rem;line-height:1.5}._item_19j8u_7[data-size=sm]{font-size:.875rem}._item_19j8u_7[data-size=md]{font-size:1rem}._typography_19j8u_1[data-size=lg]{font-size:1.125rem}._typography_19j8u_1>*:first-child{margin-top:0}._typography_19j8u_1>*:last-child{margin-bottom:0}._typography_19j8u_1 strong{font-weight:500}._typography_19j8u_1 a{color:var(--theme-base-default)}._typography_19j8u_1>p{font-size:1em;margin:1em 0}._typography_19j8u_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_19j8u_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_19j8u_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_19j8u_1>h5,._typography_19j8u_1>h6{font-size:.875rem;margin:1em 0 0}._typography_19j8u_1>h6{font-weight:500;color:var(--theme-text-subtle)}._typography_19j8u_1>h6{font-weight:400;color:var(--theme-text-subtle)}._typography_19j8u_1>h5+*,._typography_19j8u_1>h6+*{margin-top:0}._typography_19j8u_1>section{margin:1em 0}._typography_19j8u_1 ul:not([class]),._typography_19j8u_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}
+._typography_15hc3_1{width:100%;max-width:45rem;line-height:1.5}._typography_15hc3_1[data-size=xs]{font-size:.875rem}._typography_15hc3_1[data-size=sm]{font-size:1rem}._typography_15hc3_1[data-size=md]{font-size:1.125rem}._typography_15hc3_1[data-size=lg]{font-size:1.25rem}._typography_15hc3_1[data-size=xl]{font-size:1.5rem}._typography_15hc3_1>*:first-child{margin-top:0}._typography_15hc3_1>*:last-child{margin-bottom:0}._typography_15hc3_1 strong{font-weight:500}._typography_15hc3_1 a{color:var(--theme-base-default)}._typography_15hc3_1>p{font-size:1em;margin:1em 0}._typography_15hc3_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_15hc3_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_15hc3_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_15hc3_1>h5,._typography_15hc3_1>h6{font-size:.875rem;margin:1em 0 0}._typography_15hc3_1>h6{font-weight:500;color:var(--theme-text-subtle)}._typography_15hc3_1>h6{font-weight:400;color:var(--theme-text-subtle)}._typography_15hc3_1>h5+*,._typography_15hc3_1>h6+*{margin-top:0}._typography_15hc3_1>section{margin:1em 0}._typography_15hc3_1 ul:not([class]),._typography_15hc3_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}

package/dist/components/Autocomplete/AutocompleteItem.js

@@ -1,21 +1,21 @@
 import { jsx as r } from "react/jsx-runtime";
+import { BookmarksListItem as m } from "../Bookmarks/BookmarksListItem.js";
 import "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "./AutocompleteBase.js";
-import { ScopeListItem as m } from "./ScopeListItem.js";
+import { ScopeListItem as a } from "./ScopeListItem.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListItem as a } from "../Dialog/DialogListItem.js";
+import { DialogListItem as i } from "../Dialog/DialogListItem.js";
 import { ListItem as e } from "../List/ListItem.js";
-import { BookmarksListItem as i } from "../Bookmarks/BookmarksListItem.js";
 const x = ({ type: o, ...t }) => {
   switch (o) {
     case "scope":
-      return /* @__PURE__ */ r(m, { ...t, color: "transparent", tabIndex: -1 });
+      return /* @__PURE__ */ r(a, { ...t, color: "transparent", tabIndex: -1 });
     case "bookmark":
-      return /* @__PURE__ */ r(i, { ...t, color: "transparent", size: "sm", tabIndex: -1 });
+      return /* @__PURE__ */ r(m, { ...t, color: "transparent", size: "sm", tabIndex: -1 });
     case "dialog":
-      return /* @__PURE__ */ r(a, { ...t, color: "transparent", size: "sm", tabIndex: -1 });
+      return /* @__PURE__ */ r(i, { ...t, color: "transparent", size: "sm", tabIndex: -1 });
     case "information":
       return /* @__PURE__ */ r(e, { ...t, color: "transparent", tabIndex: -1, disabled: !0 });
     default:

package/dist/components/Bookmarks/BookmarksListItem.js

@@ -1,13 +1,72 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { useState as y } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { QueryLabel as e } from "./QueryLabel.js";
+import { QueryLabel as h } from "./QueryLabel.js";
+import { Button as u } from "../Button/Button.js";
+import { IconButton as C } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as p } from "../List/ListItemBase.js";
-import { ListItemHeader as n } from "../List/ListItemHeader.js";
-const u = ({ size: i = "sm", title: o, description: s, params: t, ...m }) => /* @__PURE__ */ r(p, { ...m, children: !o && /* @__PURE__ */ r(n, { size: i, title: o, linkIcon: "chevron-right", ...m, children: /* @__PURE__ */ r(e, { params: t }) }) });
+import { ListItemBase as I } from "../List/ListItemBase.js";
+import { ListItemHeader as L } from "../List/ListItemHeader.js";
+import { Section as z } from "../Page/Section.js";
+import { Flex as H } from "../Page/Flex.js";
+import { TextField as Q } from "../TextField/TextField.js";
+const V = ({
+  size: l = "sm",
+  icon: k = "bookmark",
+  expanded: t,
+  loading: o,
+  title: i,
+  titleField: a,
+  untitled: b = "Untitled bookmark",
+  params: m,
+  onToggle: n,
+  saveButton: c,
+  removeButton: e,
+  ...s
+}) => {
+  const [p, v] = y({ title: i, params: m }), j = (w) => {
+    const { name: x, value: F } = w.target;
+    v((S) => ({
+      ...S,
+      [x]: F
+    }));
+  };
+  return t && !o ? /* @__PURE__ */ f(I, { loading: o, expanded: t, children: [
+    /* @__PURE__ */ r(
+      L,
+      {
+        size: l,
+        title: i || b,
+        loading: o,
+        icon: k,
+        onClick: n,
+        controls: /* @__PURE__ */ r(C, { variant: "outline", size: "sm", icon: "chevron-up", onClick: n }),
+        ...s
+      }
+    ),
+    t && /* @__PURE__ */ f(z, { padding: "lg", spacing: "lg", children: [
+      /* @__PURE__ */ r(h, { params: m }),
+      a && /* @__PURE__ */ r(Q, { ...a, name: "title", value: (p == null ? void 0 : p.title) || "", onChange: j }),
+      (c || e) && /* @__PURE__ */ f(H, { as: "footer", direction: "row", spacing: "sm", children: [
+        c && /* @__PURE__ */ r(u, { ...c }),
+        e && /* @__PURE__ */ r(u, { ...e, variant: "outline" })
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ r(I, { ...s, loading: o, expanded: t, children: /* @__PURE__ */ r(
+    L,
+    {
+      size: l,
+      title: i,
+      loading: o,
+      icon: k,
+      controls: !o && /* @__PURE__ */ r(C, { variant: "outline", size: "sm", icon: "chevron-down", onClick: n }),
+      ...s,
+      children: !i && !o && /* @__PURE__ */ r(h, { params: m })
+    }
+  ) });
+};
 export {
-  u as BookmarksListItem
+  V as BookmarksListItem
 };

package/dist/components/Bookmarks/BookmarksSection.js

@@ -1,20 +1,43 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { createElement as f } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as e } from "../Typography/Heading.js";
-import "react";
+import { Typography as k } from "../Typography/Typography.js";
+import { Heading as x } from "../Typography/Heading.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { BookmarksList as n } from "./BookmarksList.js";
-import { MetaItem as p } from "../Meta/MetaItem.js";
+import { BookmarksListItem as h } from "./BookmarksListItem.js";
 import "../RootProvider/RootProvider.js";
-import { Section as c } from "../Page/Section.js";
-import { SectionHeader as s } from "../Page/SectionHeader.js";
-import { SectionFooter as d } from "../Page/SectionFooter.js";
-const z = ({ title: o, items: i, updatedAtLabel: t }) => /* @__PURE__ */ m(c, { padding: "lg", color: "surface", spacing: "lg", inset: !0, children: [
-  /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(e, { size: "sm", children: o }) }),
-  /* @__PURE__ */ r(n, { items: i }),
-  /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(p, { children: t }) })
+import { ListBase as g } from "../List/ListBase.js";
+import { Section as u } from "../Page/Section.js";
+const q = ({
+  loading: m,
+  title: p,
+  description: e,
+  items: t,
+  untitled: d = "Untitled bookmark",
+  titleField: n,
+  saveButton: s,
+  removeButton: a,
+  expandedId: c,
+  onToggle: i
+}) => /* @__PURE__ */ l(u, { padding: "xl", color: "surface", spacing: "lg", inset: !0, children: [
+  /* @__PURE__ */ o(x, { size: "md", children: p }),
+  t.length > 0 && /* @__PURE__ */ o(g, { spacing: "xs", children: t.map((r) => /* @__PURE__ */ f(
+    h,
+    {
+      ...r,
+      key: r.id,
+      loading: m || r.loading,
+      onToggle: () => i == null ? void 0 : i(r.id),
+      expanded: c === r.id,
+      untitled: d,
+      titleField: n,
+      saveButton: s,
+      removeButton: a
+    }
+  )) }),
+  /* @__PURE__ */ o(k, { size: "xs", children: e })
 ] });
 export {
-  z as BookmarksSection
+  q as BookmarksSection
 };

package/dist/components/Bookmarks/QueryLabel.js

@@ -1,13 +1,13 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import '../../assets/QueryLabel.css';const c = "_label_1q65r_1", o = "_group_1q65r_9", n = "_plus_1q65r_15", m = "_item_1q65r_19", l = {
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import '../../assets/QueryLabel.css';const c = "_label_1sssm_1", m = "_group_1sssm_9", o = "_plus_1sssm_15", n = "_item_1sssm_19", l = {
   label: c,
-  group: o,
-  plus: n,
-  item: m
-}, p = ({ type: e = "search", label: r }) => /* @__PURE__ */ s("mark", { className: l.item, "data-type": e, children: r }), _ = ({ params: e = [] }) => /* @__PURE__ */ s("div", { className: l.label, children: e.map((r, t) => /* @__PURE__ */ a("div", { className: l.group, children: [
-  /* @__PURE__ */ s(p, { ...r }),
-  e[t + 1] && /* @__PURE__ */ s("span", { className: l.plus, children: "+" })
-] }, t)) });
+  group: m,
+  plus: o,
+  item: n
+}, p = ({ type: s = "search", label: t }) => /* @__PURE__ */ e("mark", { className: l.item, "data-type": s, children: t }), _ = ({ params: s = [] }) => /* @__PURE__ */ e("div", { className: l.label, children: s.map((t, r) => /* @__PURE__ */ a("div", { className: l.group, children: [
+  /* @__PURE__ */ e(p, { ...t }),
+  s[r + 1] && /* @__PURE__ */ e("span", { className: l.plus, children: "+" })
+] }, r)) });
 export {
   p as QueryItem,
   _ as QueryLabel

package/dist/components/Bookmarks/index.js

@@ -1,11 +1,9 @@
-import { BookmarksList as e } from "./BookmarksList.js";
-import { BookmarksListItem as t } from "./BookmarksListItem.js";
-import { QueryItem as s, QueryLabel as a } from "./QueryLabel.js";
-import { BookmarksSection as p } from "./BookmarksSection.js";
+import { BookmarksListItem as e } from "./BookmarksListItem.js";
+import { QueryItem as t, QueryLabel as k } from "./QueryLabel.js";
+import { BookmarksSection as f } from "./BookmarksSection.js";
 export {
-  e as BookmarksList,
-  t as BookmarksListItem,
-  p as BookmarksSection,
-  s as QueryItem,
-  a as QueryLabel
+  e as BookmarksListItem,
+  f as BookmarksSection,
+  t as QueryItem,
+  k as QueryLabel
 };

package/dist/components/Button/Button.js

@@ -1,12 +1,12 @@
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
 import { c as u } from "../../index-L8X2o7IH.js";
 import { ButtonBase as d } from "./ButtonBase.js";
-import { ButtonIcon as x } from "./ButtonIcon.js";
-import { ButtonLabel as _ } from "./ButtonLabel.js";
-import '../../assets/Button.css';const B = "_button_1ysmx_1", y = "_reverse_1ysmx_8", t = {
-  button: B,
+import { ButtonIcon as _ } from "./ButtonIcon.js";
+import { ButtonLabel as B } from "./ButtonLabel.js";
+import '../../assets/Button.css';const h = "_button_1ysmx_1", y = "_reverse_1ysmx_8", t = {
+  button: h,
   reverse: y
-}, L = ({
+}, I = ({
   variant: o = "solid",
   color: e = "primary",
   size: r = "md",
@@ -14,11 +14,12 @@ import '../../assets/Button.css';const B = "_button_1ysmx_1", y = "_reverse_1ysm
   selected: a = !1,
   icon: m,
   href: l,
-  children: i,
-  className: p,
-  loading: b,
+  label: i,
+  children: p,
+  className: b,
+  loading: f,
   ...c
-}) => b ? /* @__PURE__ */ s(
+}) => f ? /* @__PURE__ */ s(
   d,
   {
     variant: o,
@@ -26,12 +27,12 @@ import '../../assets/Button.css';const B = "_button_1ysmx_1", y = "_reverse_1ysm
     size: r,
     selected: a,
     href: l,
-    className: u(t.button, { [t.reverse]: n }, p),
+    className: u(t.button, { [t.reverse]: n }, b),
     ...c,
     disabled: !0,
     children: /* @__PURE__ */ s("span", { className: t.label, "data-size": r, children: /* @__PURE__ */ s("span", { className: t.loading, children: "Loading...." }) })
   }
-) : /* @__PURE__ */ f(
+) : /* @__PURE__ */ x(
   d,
   {
     variant: o,
@@ -42,11 +43,11 @@ import '../../assets/Button.css';const B = "_button_1ysmx_1", y = "_reverse_1ysm
     className: u(t.button, { [t.reverse]: n }),
     ...c,
     children: [
-      m && /* @__PURE__ */ s(x, { size: r, icon: m }),
-      /* @__PURE__ */ s(_, { size: r, children: i })
+      m && /* @__PURE__ */ s(_, { size: r, icon: m }),
+      /* @__PURE__ */ s(B, { size: r, children: p || i })
     ]
   }
 );
 export {
-  L as Button
+  I as Button
 };

package/dist/components/Button/IconButton.js

@@ -1,19 +1,31 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
-import { ButtonBase as b } from "./ButtonBase.js";
-import { ButtonIcon as e } from "./ButtonIcon.js";
+import { jsx as o } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import { ButtonBase as e } from "./ButtonBase.js";
+import { ButtonIcon as b } from "./ButtonIcon.js";
 import '../../assets/IconButton.css';const f = "_button_1vbf2_1", p = "_icon_1vbf2_8", _ = {
   button: f,
   icon: p
-}, x = ({
+}, v = ({
   variant: n = "solid",
   color: r = "primary",
-  size: o = "md",
+  size: t = "md",
   icon: c,
   iconSize: s,
-  className: m,
-  onClick: i
-}) => /* @__PURE__ */ t(b, { variant: n, color: r, size: o, className: u(_.button, m), onClick: i, children: /* @__PURE__ */ t(e, { icon: c, size: s || o }) });
+  className: i,
+  onClick: m,
+  dataTestId: u
+}) => /* @__PURE__ */ o(
+  e,
+  {
+    variant: n,
+    color: r,
+    size: t,
+    className: a(_.button, i),
+    onClick: m,
+    "data-testid": u,
+    children: /* @__PURE__ */ o(b, { icon: c, size: s || t })
+  }
+);
 export {
-  x as IconButton
+  v as IconButton
 };

package/dist/components/Dialog/Dialog.js

@@ -42,8 +42,8 @@ const er = ({
   contactInfo: e
 }) => /* @__PURE__ */ l(G, { color: "subtle", shadow: "xs", children: [
   /* @__PURE__ */ r(J, { padding: "sm", backButton: o, menu: t, children: /* @__PURE__ */ r(C, { status: A, dueAt: y, dueAtLabel: z }) }),
-  /* @__PURE__ */ l(K, { theme: "article", padding: "xl", spacing: "xl", children: [
-    /* @__PURE__ */ r(w, { size: "lg", children: b }),
+  /* @__PURE__ */ l(K, { theme: "inherit", padding: "xl", spacing: "xl", children: [
+    /* @__PURE__ */ r(w, { size: "xl", children: b }),
     g && /* @__PURE__ */ r(F, { ...g, collapsible: !0 }),
     /* @__PURE__ */ r(
       M,

package/dist/components/Dialog/DialogContent.js

@@ -8,13 +8,13 @@ import { DialogActivityLog as l } from "./DialogActivityLog.js";
 import { DialogSeenBy as a } from "./DialogSeenBy.js";
 import { MetaBase as c } from "../Meta/MetaBase.js";
 import "../RootProvider/RootProvider.js";
-import { Byline as f } from "../Byline/Byline.js";
-import { TimelineSection as d } from "../Timeline/TimelineSection.js";
-import { Section as g } from "../Page/Section.js";
-const C = ({ updatedAt: t, updatedAtLabel: e, seenBy: o, activityLog: m, children: p }) => /* @__PURE__ */ i(d, { seen: !1, children: /* @__PURE__ */ r(g, { spacing: "lg", margin: "md", children: [
+import { Byline as d } from "../Byline/Byline.js";
+import { TimelineSection as f } from "../Timeline/TimelineSection.js";
+import { Section as s } from "../Page/Section.js";
+const C = ({ updatedAt: t, updatedAtLabel: e, seenBy: o, activityLog: m, children: p }) => /* @__PURE__ */ i(f, { seen: !1, children: /* @__PURE__ */ r(s, { spacing: "lg", margin: "md", children: [
   /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ i(f, { datetime: t, children: e }),
-    /* @__PURE__ */ i(n, { size: "lg", children: p })
+    /* @__PURE__ */ i(d, { datetime: t, children: e }),
+    /* @__PURE__ */ i(n, { size: "md", children: p })
   ] }),
   /* @__PURE__ */ r(c, { children: [
     o && /* @__PURE__ */ i(a, { ...o }),

package/dist/components/Dialog/DialogListGroup.js

@@ -1,21 +1,21 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as t } from "../Typography/Heading.js";
+import { Heading as m } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import { Button as e } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { ListBase as n } from "../List/ListBase.js";
 import { Section as p } from "../Page/Section.js";
-import { SectionHeader as c } from "../Page/SectionHeader.js";
-const B = ({ title: i, children: m }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
-  i && /* @__PURE__ */ o(c, { margin: "sm", children: [
-    /* @__PURE__ */ r(t, { children: i }),
+import { Flex as s } from "../Page/Flex.js";
+const w = ({ title: i, children: t }) => /* @__PURE__ */ o(p, { spacing: "md", children: [
+  i && /* @__PURE__ */ o(s, { direction: "row", align: "center", justify: "between", margin: "sm", children: [
+    /* @__PURE__ */ r(m, { size: "lg", children: i }),
     /* @__PURE__ */ r(e, { variant: "text", icon: "checkmark", size: "sm", children: "Velg alle" })
   ] }),
-  /* @__PURE__ */ r(n, { spacing: "md", children: m })
+  /* @__PURE__ */ r(n, { spacing: "md", children: t })
 ] });
 export {
-  B as DialogListGroup
+  w as DialogListGroup
 };

package/dist/components/Dialog/DialogSection.js

@@ -7,7 +7,7 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { Section as n } from "../Page/Section.js";
 const l = ({ title: r, children: i }) => i ? /* @__PURE__ */ o(n, { spacing: "md", margin: "md", children: [
-  r && /* @__PURE__ */ m(t, { size: "sm", children: r }),
+  r && /* @__PURE__ */ m(t, { size: "lg", children: r }),
   i
 ] }) : null;
 export {

package/dist/components/Dialog/DraftDialog.js

@@ -1,32 +1,32 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Typography as g } from "../Typography/Typography.js";
-import { Heading as w } from "../Typography/Heading.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { Heading as B } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { DialogMetadata as B } from "./DialogMetadata.js";
-import { DialogActions as P } from "./DialogActions.js";
+import { DialogMetadata as P } from "./DialogMetadata.js";
+import { DialogActions as w } from "./DialogActions.js";
 import { DialogSection as t } from "./DialogSection.js";
 import { Avatar as H } from "../Avatar/Avatar.js";
 import { DialogAttachments as M } from "./DialogAttachments.js";
 import "../RootProvider/RootProvider.js";
 import { Byline as N } from "../Byline/Byline.js";
 import { PageBase as T } from "../Page/PageBase.js";
-import { PageNav as c } from "../Page/PageNav.js";
+import { PageNav as k } from "../Page/PageNav.js";
+import { Article as q } from "../Page/Article.js";
 import { Section as s } from "../Page/Section.js";
-import { Article as k } from "../Page/Article.js";
-const $ = ({
+const c = ({
   backButton: x,
-  menu: o,
-  updatedAt: y,
-  updatedAtLabel: z,
-  dueAt: D,
+  menu: y,
+  updatedAt: z,
+  updatedAtLabel: D,
+  dueAt: o,
   dueAtLabel: A,
   status: S,
   title: b,
   sender: l,
-  recipient: h,
+  recipient: g,
   recipientLabel: u = "to",
   summary: j = "Summary.",
   body: v,
@@ -35,29 +35,29 @@ const $ = ({
   additionalInfo: m,
   contactInfo: e
 }) => /* @__PURE__ */ i(T, { color: "subtle", shadow: "xs", children: [
-  /* @__PURE__ */ r(c, { backButton: x, menu: o, children: /* @__PURE__ */ r(B, { status: S, dueAt: D, dueAtLabel: A }) }),
-  /* @__PURE__ */ i(k, { theme: "article", padding: "xl", spacing: "xl", children: [
+  /* @__PURE__ */ r(k, { backButton: x, menu: y, children: /* @__PURE__ */ r(P, { status: S, dueAt: o, dueAtLabel: A }) }),
+  /* @__PURE__ */ i(q, { padding: "xl", spacing: "xl", children: [
     /* @__PURE__ */ i(s, { as: "header", spacing: "md", children: [
-      /* @__PURE__ */ i(s, { flex: "row", align: "center", spacing: "md", children: [
+      /* @__PURE__ */ i(s, { align: "center", spacing: "md", children: [
         /* @__PURE__ */ r(H, { size: "lg", ...l }),
-        /* @__PURE__ */ r(w, { size: "lg", children: b })
+        /* @__PURE__ */ r(B, { size: "lg", children: b })
       ] }),
-      /* @__PURE__ */ i(N, { size: "md", datetime: y, children: [
-        /* @__PURE__ */ r("strong", { children: h == null ? void 0 : h.name }),
+      /* @__PURE__ */ i(N, { size: "md", datetime: z, children: [
+        /* @__PURE__ */ r("strong", { children: g == null ? void 0 : g.name }),
         u + " " + (l == null ? void 0 : l.name) + ", ",
-        z
+        D
       ] })
     ] }),
-    /* @__PURE__ */ r(s, { padding: "xl", spacing: "lg", style: { border: "1px solid", borderStyle: "dashed" }, children: /* @__PURE__ */ i(g, { size: "lg", children: [
+    /* @__PURE__ */ r(s, { padding: "xl", spacing: "lg", style: { border: "1px solid", borderStyle: "dashed" }, children: /* @__PURE__ */ i(h, { size: "lg", children: [
       /* @__PURE__ */ r("p", { children: j }),
       v,
       d && /* @__PURE__ */ r(M, { ...d }),
-      (p == null ? void 0 : p.length) > 0 && /* @__PURE__ */ r(P, { items: p })
+      (p == null ? void 0 : p.length) > 0 && /* @__PURE__ */ r(w, { items: p })
     ] }) }),
-    m && /* @__PURE__ */ r(t, { title: m == null ? void 0 : m.title, children: /* @__PURE__ */ r(g, { size: "md", children: m == null ? void 0 : m.children }) }),
-    e && /* @__PURE__ */ r(t, { title: e == null ? void 0 : e.title, children: /* @__PURE__ */ r(g, { size: "md", children: e == null ? void 0 : e.children }) })
+    m && /* @__PURE__ */ r(t, { title: m == null ? void 0 : m.title, children: /* @__PURE__ */ r(h, { size: "md", children: m == null ? void 0 : m.children }) }),
+    e && /* @__PURE__ */ r(t, { title: e == null ? void 0 : e.title, children: /* @__PURE__ */ r(h, { size: "md", children: e == null ? void 0 : e.children }) })
   ] })
 ] });
 export {
-  $ as DraftDialog
+  c as DraftDialog
 };