@rijkshuisstijl-community/components-css 17.0.0 → 17.1.0

package/index.scss

@@ -10,54 +10,54 @@
 @use "@rijkshuisstijl-community/blockquote-css/src/index" as blockquote;
 @use "@rijkshuisstijl-community/breadcrumb-nav-css/src/index" as breadcrumb;
 @use "@rijkshuisstijl-community/button-css/src/index" as button;
-@use "src/link-button/index" as linkButton;
 @use "@rijkshuisstijl-community/card-as-link-css/src/index" as cardAsLink;
 @use "@rijkshuisstijl-community/card-css/src/index" as card;
 @use "@rijkshuisstijl-community/checkbox-css/src/index" as checkbox;
 @use "@rijkshuisstijl-community/checkbox-group-css/src/index" as checkboxGroup;
-@use "src/code-input/index" as codeInput;
-@use "src/code-input-group/index" as codeInputGroup;
-@use "src/data-badge-button/index" as dataBadgeButton;
+@use "@rijkshuisstijl-community/code-input-css/src/index" as codeInput;
+@use "@rijkshuisstijl-community/code-input-group-css/src/index" as codeInputGroup;
+@use "@rijkshuisstijl-community/data-badge-button-css/src/index" as dataBadgeButton;
+@use "@rijkshuisstijl-community/data-summary-css/src/index" as dataSummary;
 @use "@rijkshuisstijl-community/dot-badge-css/src/index" as dotBadge;
 @use "src/expandable-checkbox-group/index" as expandableCheckboxGroup;
 @use "@rijkshuisstijl-community/figure-css/src/index" as figure;
-@use "src/file/index" as file;
-@use "src/file-input/index" as fileInput;
+@use "@rijkshuisstijl-community/file-css/src/index" as file;
+@use "@rijkshuisstijl-community/file-input-css/src/index" as fileInput;
 @use "src/form/index" as form;
 @use "src/form-field/index" as formField;
 @use "src/form-field-radio-option/index" as FormFieldRadio;
-@use "src/footer/index" as footer;
-@use "src/heading/index" as heading;
-@use "src/hero/index" as hero;
-@use "src/language-navigation/index" as languageNavigation;
-@use "src/link-list/index" as linkList;
-@use "src/link-list-card/index" as linkListCard;
+@use "@rijkshuisstijl-community/footer-css/src/index" as footer;
+@use "@rijkshuisstijl-community/heading-css/src/index" as heading;
+@use "@rijkshuisstijl-community/hero-css/src/index" as hero;
+@use "@rijkshuisstijl-community/language-navigation-css/src/index" as languageNavigation;
+@use "@rijkshuisstijl-community/link-button-css/src/index" as linkButton;
+@use "@rijkshuisstijl-community/link-list-css/src/index" as linkList;
+@use "@rijkshuisstijl-community/link-list-card-css/src/index" as linkListCard;
 @use "@rijkshuisstijl-community/link-css/src/index" as link;
-@use "src/listbox/index" as listbox;
-@use "src/logo/index" as logo;
-@use "src/navbar/index" as navbar;
-@use "src/message-list/index" as messageList;
-@use "src/navigation-list/index" as navigationList;
-@use "src/number-badge/index" as numberBadge;
-@use "src/ordered-list/index" as orderedList;
+@use "@rijkshuisstijl-community/listbox-css/src/index" as listbox;
+@use "@rijkshuisstijl-community/logo-css/src/index" as logo;
+@use "@rijkshuisstijl-community/navigation-bar-css/src/index"as navBar;
+@use "@rijkshuisstijl-community/message-list-css/src/index" as messageList;
+@use "@rijkshuisstijl-community/navigation-list-css/src/index" as navigationList;
+@use "@rijkshuisstijl-community/number-badge-css/src/index" as numberBadge;
+@use "@rijkshuisstijl-community/ordered-list-css/src/index" as orderedList;
 @use "@rijkshuisstijl-community/paragraph-css/src/index" as paragraph;
-@use "src/page-number-navigation/index" as pagination;
+@use "@rijkshuisstijl-community/page-number-navigation-css/src/index" as pagination;
 @use "src/pre-heading/index" as preHeading;
-@use "src/radio/index" as radio;
+@use "@rijkshuisstijl-community/radio-css/src/index" as radio;
 @use "src/radio-group/index" as radioGroup;
-@use "src/rounded-corner/index" as roundedCorner;
+@use "@rijkshuisstijl-community/rounded-corner-css/src/index" as roundedCorner;
 @use "src/select/index" as select;
 @use "@rijkshuisstijl-community/separator-css/src/index" as separator;
-@use "src/side-nav/index" as sideNav;
-@use "src/skip-link/index" as skipLink;
+@use "@rijkshuisstijl-community/side-nav-css/src/index" as sideNav;
+@use "@rijkshuisstijl-community/skip-link-css/src/index" as skipLink;
 @use "src/table/index" as table;
-@use "src/textarea/index" as textarea;
-@use "src/text-input/index" as textinput;
-@use "src/toggletip/index" as toggletip;
-@use "src/unordered-list/index" as unorderedList;
-@use "src/visually-hidden/index" as visually-hidden;
+@use "@rijkshuisstijl-community/textarea-css/src/index" as textarea;
+@use "@rijkshuisstijl-community/text-input-css/src/index" as textinput;
+@use "@rijkshuisstijl-community/toggletip-css/src/index" as toggletip;
+@use "@rijkshuisstijl-community/unordered-list-css/src/index" as unorderedList;
+@use "@rijkshuisstijl-community/visually-hidden-css/src/index" as visually-hidden;
 @use "src/wrapper/index" as wrapper;
-@use "src/data-summary/index" as dataSummary;
 
 @import "@utrecht/action-group-css/dist/index.css";
 @import "@utrecht/article-css/dist/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -11,7 +11,7 @@
   "private": false,
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "provenance": true
   },
   "repository": {
     "type": "git+ssh",
@@ -78,22 +78,52 @@
     "@utrecht/textarea-css": "2.3.2",
     "@utrecht/textbox-css": "2.0.0",
     "@utrecht/unordered-list-css": "1.5.1",
-    "@rijkshuisstijl-community/accordion-css": "2.0.1",
-    "@rijkshuisstijl-community/action-group-css": "1.0.0",
-    "@rijkshuisstijl-community/alert-css": "4.0.1",
-    "@rijkshuisstijl-community/article-css": "2.0.1",
-    "@rijkshuisstijl-community/blockquote-css": "1.0.1",
-    "@rijkshuisstijl-community/breadcrumb-nav-css": "1.0.0",
-    "@rijkshuisstijl-community/button-css": "1.0.1",
-    "@rijkshuisstijl-community/card-as-link-css": "1.0.0",
-    "@rijkshuisstijl-community/card-css": "1.0.0",
-    "@rijkshuisstijl-community/checkbox-group-css": "1.0.0",
-    "@rijkshuisstijl-community/checkbox-css": "1.0.0",
-    "@rijkshuisstijl-community/dot-badge-css": "1.0.1",
-    "@rijkshuisstijl-community/figure-css": "1.0.1",
-    "@rijkshuisstijl-community/link-css": "1.0.1",
-    "@rijkshuisstijl-community/paragraph-css": "2.0.1",
-    "@rijkshuisstijl-community/separator-css": "1.0.1"
+    "@rijkshuisstijl-community/accordion-css": "2.1.0",
+    "@rijkshuisstijl-community/action-group-css": "1.1.0",
+    "@rijkshuisstijl-community/alert-css": "4.1.0",
+    "@rijkshuisstijl-community/article-css": "2.1.0",
+    "@rijkshuisstijl-community/blockquote-css": "1.1.0",
+    "@rijkshuisstijl-community/breadcrumb-nav-css": "1.1.0",
+    "@rijkshuisstijl-community/button-css": "1.1.0",
+    "@rijkshuisstijl-community/card-as-link-css": "1.1.0",
+    "@rijkshuisstijl-community/card-css": "1.1.0",
+    "@rijkshuisstijl-community/checkbox-group-css": "1.0.1",
+    "@rijkshuisstijl-community/checkbox-css": "1.0.1",
+    "@rijkshuisstijl-community/code-input-css": "1.0.0",
+    "@rijkshuisstijl-community/code-input-group-css": "1.0.0",
+    "@rijkshuisstijl-community/data-badge-button-css": "1.0.0",
+    "@rijkshuisstijl-community/data-summary-css": "1.0.0",
+    "@rijkshuisstijl-community/dot-badge-css": "1.1.0",
+    "@rijkshuisstijl-community/figure-css": "1.1.0",
+    "@rijkshuisstijl-community/file-css": "1.0.0",
+    "@rijkshuisstijl-community/file-input-css": "1.0.0",
+    "@rijkshuisstijl-community/footer-css": "1.0.0",
+    "@rijkshuisstijl-community/heading-css": "1.0.0",
+    "@rijkshuisstijl-community/hero-css": "1.0.0",
+    "@rijkshuisstijl-community/link-button-css": "1.0.0",
+    "@rijkshuisstijl-community/link-list-card-css": "1.0.0",
+    "@rijkshuisstijl-community/link-css": "1.1.0",
+    "@rijkshuisstijl-community/listbox-css": "1.0.0",
+    "@rijkshuisstijl-community/language-navigation-css": "1.0.0",
+    "@rijkshuisstijl-community/link-list-css": "1.0.0",
+    "@rijkshuisstijl-community/logo-css": "1.0.0",
+    "@rijkshuisstijl-community/message-list-css": "1.0.0",
+    "@rijkshuisstijl-community/navigation-bar-css": "1.0.0",
+    "@rijkshuisstijl-community/navigation-list-css": "1.0.0",
+    "@rijkshuisstijl-community/number-badge-css": "1.0.0",
+    "@rijkshuisstijl-community/ordered-list-css": "1.0.0",
+    "@rijkshuisstijl-community/page-number-navigation-css": "1.0.0",
+    "@rijkshuisstijl-community/paragraph-css": "2.1.0",
+    "@rijkshuisstijl-community/radio-css": "1.0.0",
+    "@rijkshuisstijl-community/rounded-corner-css": "1.0.0",
+    "@rijkshuisstijl-community/separator-css": "1.1.0",
+    "@rijkshuisstijl-community/side-nav-css": "1.0.0",
+    "@rijkshuisstijl-community/skip-link-css": "1.0.0",
+    "@rijkshuisstijl-community/text-input-css": "1.0.0",
+    "@rijkshuisstijl-community/textarea-css": "1.0.0",
+    "@rijkshuisstijl-community/toggletip-css": "1.0.0",
+    "@rijkshuisstijl-community/unordered-list-css": "1.0.0",
+    "@rijkshuisstijl-community/visually-hidden-css": "1.0.0"
   },
   "scripts": {
     "dev": "vite build --watch",

package/src/expandable-checkbox-group/_mixin.scss

@@ -3,7 +3,7 @@
  * Copyright (c) 2026 Community for NL Design System
  */
 
-@use "../visually-hidden/mixin" as visually-hidden;
+@use "@rijkshuisstijl-community/visually-hidden-css/src/mixin" as visually-hidden;
 @use "@utrecht/focus-ring-css/src/mixin" as utrecht-focus-mixin;
 
 @mixin rhc-expandable-checkbox-group__details {

package/src/wrapper/createSpacingCSS.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 const spacingMatrix = JSON.parse(fs.readFileSync('./src/wrapper/spacing-matrix.json'));
 
 const spaceMap = {

package/src/code-input/index.scss

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-code-input {
-  block-size: var(--rhc-code-input-size);
-  inline-size: var(--rhc-code-input-size);
-  text-align: center;
-
-  &--capitalized {
-    text-transform: uppercase;
-  }
-}

package/src/code-input-group/_mixin.scss

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-code-input-group {
-  column-gap: var(--rhc-code-input-group-column-gap);
-  display: flex;
-  flex-direction: row;
-}
-
-@mixin rhc-code-input {
-  block-size: var(--rhc-code-input-size);
-  inline-size: var(--rhc-code-input-size);
-  text-align: center;
-}

package/src/code-input-group/index.scss

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-code-input {
-  @include mixin.rhc-code-input;
-}
-
-.rhc-code-input-group {
-  @include mixin.rhc-code-input-group;
-}

package/src/data-badge-button/_mixin.scss

@@ -1,28 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "@rijkshuisstijl-community/button-css/src/mixin" as button-mixin;
-@use "@utrecht/focus-ring-css/src/mixin" as utrecht-focus-mixin;
-
-@mixin rhc-data-badge-button {
-  align-items: center;
-  column-gap: var(--rhc-data-badge-button-column-gap);
-  cursor: pointer;
-  display: inline-flex;
-  position: relative;
-}
-
-@mixin rhc-data-badge-button--hover {
-  --utrecht-data-badge-background-color: var(--rhc-data-badge-button-hover-background-color);
-  --utrecht-data-badge-color: var(--rhc-data-badge-button-hover-color);
-}
-
-@mixin rhc-data-badge-button__sr-only {
-  @include button-mixin.invisible-but-accessible;
-}
-
-@mixin rhc-data-badge-button--focus-visible {
-  @include utrecht-focus-mixin.utrecht-focus-visible;
-}

package/src/data-badge-button/index.scss

@@ -1,23 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-data-badge-button {
-  @include mixin.rhc-data-badge-button;
-
-  &:hover {
-    @include mixin.rhc-data-badge-button--hover;
-  }
-}
-
-.rhc-data-badge-button .rhc-data-badge-button__sr-only {
-  @include mixin.rhc-data-badge-button__sr-only;
-}
-
-.rhc-data-badge-button:focus-visible,
-.rhc-data-badge-button--focus-visible {
-  @include mixin.rhc-data-badge-button--focus-visible;
-}

package/src/data-summary/_mixin.scss

@@ -1,127 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-data-summary {
-  font-family: var(--rhc-data-summary-font-family);
-  font-size: var(--rhc-data-summary-font-size);
-  line-height: var(--rhc-data-summary-line-height);
-}
-
-@mixin rhc-data-summary__item {
-  border-block-end-style: var(--rhc-data-summary-item-border-block-end-style);
-  border-color: var(--rhc-data-summary-item-border-color);
-  border-width: var(--rhc-data-summary-item-border-width);
-  color: var(--rhc-data-summary-item-color);
-  display: flex;
-}
-
-@mixin rhc-data-summary--column__item {
-  flex-direction: column;
-}
-
-@mixin rhc-data-summary--row__item {
-  @include rhc-data-summary--column__item;
-
-  @media (width > 768px) {
-    flex-direction: row;
-  }
-}
-
-@mixin rhc-data-summary__item-action {
-  padding-block-end: var(--_rhc-data-summary-item-action-padding-block-end);
-  padding-block-start: var(--_rhc-data-summary-item-action-padding-block-start);
-  padding-inline-end: var(--_rhc-data-summary-item-action-padding-inline-end);
-  padding-inline-start: var(--_rhc-data-summary-item-action-padding-inline-start);
-
-  @media (width > 768px) {
-    flex-basis: 20%;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-@mixin rhc-data-summary--column__item-action {
-  --_rhc-data-summary-item-action-padding-block-end: var(--rhc-data-summary-item-action-padding-block-end);
-  --_rhc-data-summary-item-action-padding-block-start: var(--rhc-data-summary-item-action-padding-block-start);
-  --_rhc-data-summary-item-action-padding-inline-end: var(--rhc-data-summary-item-action-padding-inline-end);
-  --_rhc-data-summary-item-action-padding-inline-start: var(--rhc-data-summary-item-action-padding-inline-start);
-
-  margin-inline-start: 0;
-}
-
-@mixin rhc-data-summary--row__item-action {
-  @include rhc-data-summary--column__item-action;
-
-  @media (width > 768px) {
-    --_rhc-data-summary-item-action-padding-block-end: var(--rhc-data-summary-item-action-row-padding-block-end);
-    --_rhc-data-summary-item-action-padding-block-start: var(--rhc-data-summary-item-action-row-padding-block-start);
-    --_rhc-data-summary-item-action-padding-inline-end: var(--rhc-data-summary-item-action-row-padding-inline-end);
-    --_rhc-data-summary-item-action-padding-inline-start: var(--rhc-data-summary-item-action-row-padding-inline-start);
-
-    margin-inline-start: auto;
-    text-align: end;
-  }
-}
-
-@mixin rhc-data-summary__item-key {
-  font-weight: var(--rhc-data-summary-item-key-font-weight);
-  padding-block-end: var(--_rhc-data-summary-item-key-padding-block-end);
-  padding-block-start: var(--_rhc-data-summary-item-key-padding-block-start);
-  padding-inline-end: var(--_rhc-data-summary-item-key-padding-inline-end);
-  padding-inline-start: var(--_rhc-data-summary-item-key-padding-inline-start);
-}
-
-@mixin rhc-data-summary--column__item-key {
-  --_rhc-data-summary-item-key-padding-block-end: var(--rhc-data-summary-item-key-padding-block-end);
-  --_rhc-data-summary-item-key-padding-block-start: var(--rhc-data-summary-item-key-padding-block-start);
-  --_rhc-data-summary-item-key-padding-inline-end: var(--rhc-data-summary-item-key-padding-inline-end);
-  --_rhc-data-summary-item-key-padding-inline-start: var(--rhc-data-summary-item-key-padding-inline-start);
-}
-
-@mixin rhc-data-summary--row__item-key {
-  @include rhc-data-summary--column__item-key;
-
-  @media (width > 768px) {
-    --_rhc-data-summary-item-key-padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
-    --_rhc-data-summary-item-key-padding-block-start: var(--rhc-data-summary-item-key-row-padding-block-start);
-    --_rhc-data-summary-item-key-padding-inline-end: var(--rhc-data-summary-item-key-row-padding-inline-end);
-    --_rhc-data-summary-item-key-padding-inline-start: var(--rhc-data-summary-item-key-row-padding-inline-start);
-
-    flex-basis: 20%;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-@mixin rhc-data-summary__item-value {
-  flex: 1;
-  font-weight: var(--rhc-data-summary-item-value-font-weight);
-  margin-inline-start: 0;
-  padding-block-end: var(--_rhc-data-summary-item-value-padding-block-end);
-  padding-block-start: var(--_rhc-data-summary-item-value-padding-block-start);
-  padding-inline-end: var(--_rhc-data-summary-item-value-padding-inline-end);
-  padding-inline-start: var(--_rhc-data-summary-item-value-padding-inline-start);
-}
-
-@mixin rhc-data-summary--column__item-value {
-  --_rhc-data-summary-item-value-padding-block-end: var(--rhc-data-summary-item-value-padding-block-end);
-  --_rhc-data-summary-item-value-padding-block-start: var(--rhc-data-summary-item-value-padding-block-start);
-  --_rhc-data-summary-item-value-padding-inline-end: var(--rhc-data-summary-item-value-padding-inline-end);
-  --_rhc-data-summary-item-value-padding-inline-start: var(--rhc-data-summary-item-value-padding-inline-start);
-}
-
-@mixin rhc-data-summary--row__item-value {
-  @include rhc-data-summary--column__item-value;
-
-  @media (width > 768px) {
-    --_rhc-data-summary-item-value-padding-block-end: var(--rhc-data-summary-item-value-row-padding-block-end);
-    --_rhc-data-summary-item-value-padding-block-start: var(--rhc-data-summary-item-value-row-padding-block-start);
-    --_rhc-data-summary-item-value-padding-inline-end: var(--rhc-data-summary-item-value-row-padding-inline-end);
-    --_rhc-data-summary-item-value-padding-inline-start: var(--rhc-data-summary-item-value-row-padding-inline-start);
-
-    flex-basis: 60%;
-    flex-grow: 0;
-  }
-}

package/src/data-summary/index.scss

@@ -1,58 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-data-summary {
-  @include mixin.rhc-data-summary;
-}
-
-.rhc-data-summary__item {
-  @include mixin.rhc-data-summary__item;
-}
-
-.rhc-data-summary--column .rhc-data-summary__item {
-  @include mixin.rhc-data-summary--column__item;
-}
-
-.rhc-data-summary--row .rhc-data-summary__item {
-  @include mixin.rhc-data-summary--row__item;
-}
-
-.rhc-data-summary__item-action {
-  @include mixin.rhc-data-summary__item-action;
-}
-
-.rhc-data-summary--column .rhc-data-summary__item-action {
-  @include mixin.rhc-data-summary--column__item-action;
-}
-
-.rhc-data-summary--row .rhc-data-summary__item-action {
-  @include mixin.rhc-data-summary--row__item-action;
-}
-
-.rhc-data-summary__item-key {
-  @include mixin.rhc-data-summary__item-key;
-}
-
-.rhc-data-summary--column .rhc-data-summary__item-key {
-  @include mixin.rhc-data-summary--column__item-key;
-}
-
-.rhc-data-summary--row .rhc-data-summary__item-key {
-  @include mixin.rhc-data-summary--row__item-key;
-}
-
-.rhc-data-summary__item-value {
-  @include mixin.rhc-data-summary__item-value;
-}
-
-.rhc-data-summary--column .rhc-data-summary__item-value {
-  @include mixin.rhc-data-summary--column__item-value;
-}
-
-.rhc-data-summary--row .rhc-data-summary__item-value {
-  @include mixin.rhc-data-summary--row__item-value;
-}

package/src/file/index.scss

@@ -1,43 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-file {
-  border-color: var(--rhc-file-border-color);
-  border-radius: var(--rhc-file-border-radius);
-  border-style: var(--rhc-file-border-style);
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-file-padding-block-end);
-  padding-block-start: var(--rhc-file-padding-block-start);
-  padding-inline-end: var(--rhc-file-padding-inline-end);
-  padding-inline-start: var(--rhc-file-padding-inline-start);
-}
-
-.rhc-file__name {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rhc-file__subtitle {
-  color: var(--rhc-file-subtitle-color);
-}
-
-.rhc-file__inner-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.rhc-file__inner-container__sub {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.rhc-file--error {
-  border-color: var(--rhc-file-error-border-color);
-}

package/src/file-input/index.scss

@@ -1,32 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-file-input {
-  display: flex;
-  flex-direction: column;
-  font-family: var(--rhc-text-font-family-default, inherit);
-  line-height: var(--rhc-text-line-height-md, inherit);
-  row-gap: var(--rhc-file-input-row-gap);
-}
-
-.rhc-file-input__button-feedback-container {
-  display: flex;
-}
-
-.rhc-file-input__feedback {
-  --nl-paragraph-font-size: var(--rhc-file-input-feedback-font-size);
-  --nl-paragraph-color: var(--rhc-file-input-feedback-color);
-
-  align-items: center;
-  display: flex;
-  padding-inline-end: var(--rhc-file-padding-inline-end);
-  padding-inline-start: var(--rhc-file-padding-inline-start);
-}
-
-.rhc-file-input__files-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rhc-file-column-gap);
-}