@norges-domstoler/dds-components 0.0.0-dev-20250410075453 → 0.0.0-dev-20250423101101

package/dist/index.css

@@ -2190,6 +2190,7 @@
   --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
   --dds-focus-transition: outline-offset 0.2s;
   --dds-input-default-width: 320px;
+  --dds-input-default-width-xsmall: 210px;
   --dds-transition-duration-surface-move: 0.5s;
 }
 .ThemeProvider_global-styles {
@@ -2462,16 +2463,11 @@
 
 /* src/components/TextArea/TextArea.module.css */
 .TextArea_textarea {
-  width: var(--dds-text-area-width);
   height: auto;
   resize: vertical;
   vertical-align: bottom;
   padding-bottom: var(--dds-spacing-x0-5);
 }
-.TextArea_message-container {
-  display: flex;
-  justify-content: space-between;
-}
 
 /* src/components/Tooltip/Tooltip.module.css */
 .Tooltip_container {
@@ -2502,20 +2498,12 @@
 }
 
 /* src/components/FileUploader/FileUploader.module.css */
-.FileUploader_container {
-  width: var(--dds-input-default-width);
-}
 .FileUploader_input-container {
   box-sizing: border-box;
-  border: 2px solid;
-  border-style: dashed;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dds-spacing-x1);
+  border: 2px dashed;
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-default);
   border-radius: var(--dds-border-radius-surface);
-  padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
   @media (prefers-reduced-motion: no-preference) {
     transition: background-color 0.2s, border-color 0.2s;
   }
@@ -2530,19 +2518,7 @@
 .FileUploader_input-container--no-drag-zone {
   padding: var(--dds-spacing-x0-5) 0;
 }
-.FileUploader_file {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--dds-spacing-x0-75);
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
-  margin-top: var(--dds-spacing-x0-5);
-  background-color: var(--dds-color-surface-subtle);
-  border-radius: var(--dds-border-radius-surface);
-  border: 1px solid var(--dds-color-border-default);
-}
 .FileUploader_file--invalid {
-  border: 1px solid var(--dds-color-border-danger);
   box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
 }
 .FileUploader_file__icon--invalid {
@@ -2638,9 +2614,6 @@
 }
 
 /* src/components/InlineEdit/InlineEdit.module.css */
-.InlineEdit_container {
-  position: relative;
-}
 .InlineEdit_inline-input {
   width: 100%;
   padding: var(--dds-spacing-x0-25);
@@ -2670,9 +2643,6 @@
 .InlineEdit_inline-input--with-icon {
   padding-left: var(--dds-spacing-x2);
 }
-.InlineEdit_inline-input--with-icon--is-editing {
-  padding-left: var(--dds-spacing-x0-25);
-}
 .InlineEdit_inline-textarea {
   resize: vertical;
 }
@@ -2808,11 +2778,7 @@
 .LocalMessage_container {
   border: 1px solid;
   box-sizing: border-box;
-  display: grid;
-  align-items: center;
   border-radius: var(--dds-border-radius-surface);
-  padding: var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-x0-5);
 }
 .LocalMessage_container--info {
   border-color: var(--dds-color-border-info);
@@ -2930,11 +2896,6 @@
 }
 
 /* src/components/Select/Select.module.css */
-.Select_container {
-  margin: 0;
-  position: relative;
-  width: var(--dds-select-width);
-}
 .Select_container--disabled {
   cursor: not-allowed;
 }
@@ -2971,17 +2932,12 @@
 }
 
 /* src/components/Select/NativeSelect/NativeSelect.module.css */
-.NativeSelect_container {
-  position: relative;
-  width: -moz-fit-content;
-  width: fit-content;
-}
 .NativeSelect_select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  width: var(--dds-native-select-width);
   text-overflow: ellipsis;
+  width: 100%;
   &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
     border-color: var(--dds-color-border-action-hover);
     box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
@@ -3050,93 +3006,75 @@
   .PhoneInput_input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    width: var(--dds-phone-input-width);
   }
-  .PhoneInput_select {
-    width: 8rem;
+  select {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    margin-right: -1px;
   }
-  .PhoneInput_select--xsmall {
-    width: 5rem;
+  .PhoneInput_select > div {
+    margin-right: -1px;
   }
 }
 .PhoneInput_inputs-container--small-screen-xs {
   @media only screen and (max-width: 600px) {
-    width: var(--dds-phone-input-width);
     .PhoneInput_input {
       border-top-right-radius: 0;
-      width: 100%;
     }
-    .PhoneInput_select {
+    select {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      width: 100%;
       margin-bottom: -1px;
     }
   }
 }
 .PhoneInput_inputs-container--small-screen-sm {
   @media only screen and (max-width: 960px) {
-    width: var(--dds-phone-input-width);
     .PhoneInput_input {
       border-top-right-radius: 0;
-      width: 100%;
     }
-    .PhoneInput_select {
+    select {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      width: 100%;
       margin-bottom: -1px;
     }
   }
 }
 .PhoneInput_inputs-container--small-screen-md {
   @media only screen and (max-width: 1280px) {
-    width: var(--dds-phone-input-width);
     .PhoneInput_input {
       border-top-right-radius: 0;
-      width: 100%;
     }
-    .PhoneInput_select {
+    select {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      width: 100%;
       margin-bottom: -1px;
     }
   }
 }
 .PhoneInput_inputs-container--small-screen-lg {
   @media only screen and (max-width: 1920px) {
-    width: var(--dds-phone-input-width);
     .PhoneInput_input {
       border-top-right-radius: 0;
-      width: 100%;
     }
-    .PhoneInput_select {
+    select {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      width: 100%;
       margin-bottom: -1px;
     }
   }
 }
 .PhoneInput_inputs-container--small-screen-xl {
-  width: var(--dds-phone-input-width);
   .PhoneInput_input {
     border-top-right-radius: 0;
-    width: 100%;
   }
-  .PhoneInput_select {
+  select {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    width: 100%;
     margin-bottom: -1px;
   }
 }
-.PhoneInput_select:focus-visible,
-.PhoneInput_select:hover {
+select:focus-visible,
+select:hover {
   z-index: var(--dds-zindex-absolute-element);
   & ~ svg {
     z-index: var(--dds-zindex-absolute-element);
@@ -3292,25 +3230,12 @@
 }
 
 /* src/components/ProgressBar/ProgressBar.module.css */
-.ProgressBar_container {
-  width: 100%;
-}
 .ProgressBar_progress {
-  width: var(--dds-progressbar-width);
-  height: 48px;
   background-color: var(--dds-color-surface-medium);
   border: 1px solid var(--dds-color-border-default);
   border-radius: var(--dds-border-radius-surface);
 }
-.ProgressBar_progress--small {
-  height: var(--dds-spacing-x0-75);
-}
-.ProgressBar_progress--medium {
-  height: var(--dds-spacing-x1-5);
-}
 .ProgressBar_fill {
-  height: 100%;
-  width: var(--dds-progressbar-fill-width);
   background-color: var(--dds-color-surface-action-resting);
   @media (prefers-reduced-motion: no-preference) {
     transition: width 0.2s, background-color 0.2s;
@@ -3323,7 +3248,6 @@
   background-color: var(--dds-color-surface-action-danger-resting);
 }
 .ProgressBar_fill--indeterminate {
-  width: 25%;
   animation: ProgressBar_indeterminate 2s infinite linear;
 }
 @keyframes ProgressBar_indeterminate {
@@ -4144,11 +4068,6 @@
 }
 
 /* src/components/ToggleBar/ToggleBar.module.css */
-.ToggleBar_container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dds-spacing-x0-125);
-}
 .ToggleBar_bar {
   display: grid;
   grid-auto-flow: column;