banhaten 0.3.0 → 0.5.0

package/registry/components/expanded/fileUpload.css

@@ -1,457 +1,457 @@
-.ds-file-upload {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--bh-file-upload-root-max-width);
-  display: grid;
-  align-content: start;
-  gap: var(--bh-space-xl-12);
-  color: var(--bh-content-default);
-  font-family: var(--bh-font-family);
-  letter-spacing: var(--bh-text-base-letter-spacing);
-}
-
-.ds-file-upload *,
-.ds-file-upload *::before,
-.ds-file-upload *::after {
-  box-sizing: border-box;
-}
-
-.ds-file-upload--sm {
-  max-width: var(--bh-file-upload-content-max-width);
-}
-
-.ds-file-upload__dropzone {
-  min-height: calc(var(--bh-space-13xl-160) + var(--bh-space-4xl-20));
-  display: grid;
-  place-items: center;
-  gap: var(--bh-space-3xl-16);
-  padding: var(--bh-space-6xl-32) var(--bh-space-5xl-24);
-  border: var(--bh-border-width-strong) dashed var(--bh-border-default);
-  border-radius: var(--bh-radius-2xl-12);
-  background: var(--bh-bg-subtle);
-  color: var(--bh-content-default);
-  text-align: center;
-  transition:
-    background-color var(--bh-duration-fast) var(--bh-easing-standard),
-    border-color var(--bh-duration-fast) var(--bh-easing-standard),
-    color var(--bh-duration-fast) var(--bh-easing-standard),
-    opacity var(--bh-duration-fast) var(--bh-easing-standard);
-}
-
-.ds-file-upload--button .ds-file-upload__dropzone {
-  min-height: var(--bh-space-16xl-256);
-  gap: var(--bh-space-5xl-24);
-  padding-inline: var(--bh-space-6xl-32);
-}
-
-.ds-file-upload__dropzone:hover,
-.ds-file-upload__dropzone.is-hover {
-  border-color: var(--bh-border-strong);
-}
-
-.ds-file-upload__dropzone[aria-disabled="true"] {
-  border-color: var(--bh-border-disabled);
-  color: var(--bh-content-disabled);
-  cursor: not-allowed;
-}
-
-.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__helper,
-.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__browse,
-.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__title {
-  color: var(--bh-content-disabled);
-}
-
-.ds-file-upload__input {
-  display: none;
-}
-
-.ds-file-upload__icon {
-  width: var(--bh-space-8xl-48);
-  height: var(--bh-space-8xl-48);
-  display: grid;
-  place-items: center;
-  border: 0;
-  border-radius: var(--bh-radius-2xl-12);
-  background: var(--bh-bg-default);
-  color: var(--bh-content-default);
-  box-shadow:
-    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
-    var(--shadow-component-default);
-}
-
-.ds-file-upload__dropzone:hover .ds-file-upload__icon,
-.ds-file-upload__dropzone.is-hover .ds-file-upload__icon,
-.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__icon {
-  box-shadow:
-    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
-    var(--shadow-component-default);
-}
-
-.ds-file-upload__icon svg {
-  width: var(--bh-space-5xl-24);
-  height: var(--bh-space-5xl-24);
-  stroke-width: var(--bh-icon-stroke-200);
-}
-
-.ds-file-upload__copy {
-  min-width: 0;
-  display: grid;
-  justify-items: center;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-file-upload--button .ds-file-upload__copy {
-  gap: var(--bh-space-md-8);
-}
-
-.ds-file-upload__title {
-  margin: 0;
-  color: var(--bh-content-default);
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-medium-line-height);
-}
-
-.ds-file-upload--button .ds-file-upload__title {
-  font-size: var(--bh-text-body-lg-semibold-font-size);
-  font-weight: var(--bh-font-weight-semibold);
-  line-height: var(--bh-text-body-lg-semibold-line-height);
-}
-
-.ds-file-upload__browse {
-  border: 0;
-  background: transparent;
-  color: var(--bh-content-link);
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-}
-
-.ds-file-upload__browse:hover {
-  color: var(--bh-content-link-hover);
-}
-
-.ds-file-upload__browse:focus-visible,
-.ds-file-upload-row__retry:focus-visible {
-  border-radius: var(--bh-radius-sm-4);
-  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-file-upload__helper {
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-md-regular-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-md-regular-line-height);
-}
-
-.ds-file-upload__button {
-  width: calc(var(--bh-space-13xl-160) + var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
-}
-
-.ds-file-upload__list {
-  display: grid;
-  align-content: start;
-  gap: var(--bh-space-xl-12);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.ds-file-upload-row {
-  --ds-file-upload-row-border: var(--bh-border-subtle);
-  --ds-file-upload-row-shadow:
-    inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
-    var(--shadow-component-default);
-
-  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-xl-12);
-  padding: var(--bh-space-3xl-16);
-  border: 0;
-  border-radius: var(--bh-radius-2xl-12);
-  background: var(--bh-bg-raised);
-  box-shadow: var(--ds-file-upload-row-shadow);
-  overflow: clip;
-}
-
-.ds-file-upload-row--sm {
-  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
-  gap: var(--bh-space-md-8);
-  padding: var(--bh-space-xl-12);
-  border-radius: var(--bh-radius-lg-8);
-}
-
-.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg {
-  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-lg-10));
-}
-
-.ds-file-upload-row--uploading-progress.ds-file-upload-row--sm {
-  min-height: var(--bh-space-9xl-64);
-}
-
-.ds-file-upload-row--error {
-  --ds-file-upload-row-border: var(--bh-border-danger-strong);
-  --ds-file-upload-row-shadow:
-    inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
-    var(--shadow-xs);
-}
-
-.ds-file-upload-row__content {
-  min-width: 0;
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-xl-12);
-}
-
-.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__content,
-.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg .ds-file-upload-row__content {
-  align-items: flex-start;
-}
-
-.ds-file-upload-row--sm .ds-file-upload-row__content {
-  gap: var(--bh-space-xl-12);
-}
-
-.ds-file-upload-file-icon {
-  --ds-file-upload-file-page-fill: var(--bh-bg-neutral-subtle);
-
-  position: relative;
-  width: var(--bh-space-7xl-40);
-  height: var(--bh-space-7xl-40);
-  display: block;
-  flex: 0 0 var(--bh-space-7xl-40);
-  color: var(--bh-content-subtle);
-}
-
-.ds-file-upload-file-icon--sm {
-  width: var(--bh-space-6xl-32);
-  height: var(--bh-space-6xl-32);
-  flex-basis: var(--bh-space-6xl-32);
-}
-
-.ds-file-upload-file-icon__svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  overflow: visible;
-}
-
-.ds-file-upload-file-icon__page {
-  fill: var(--ds-file-upload-file-page-fill);
-  stroke: currentColor;
-}
-
-.ds-file-upload-file-icon__fold {
-  stroke: currentColor;
-}
-
-.ds-file-upload-file-icon__badge {
-  fill: var(--ds-file-upload-file-badge-bg);
-}
-
-.ds-file-upload-file-icon__label {
-  fill: var(--bh-content-on-color);
-  font-family: var(--bh-font-family);
-  font-size: calc(var(--bh-space-lg-10) - var(--bh-space-xxxs-1));
-  font-weight: var(--bh-font-weight-bold);
-  letter-spacing: var(--bh-text-base-letter-spacing);
-  line-height: 1;
-  pointer-events: none;
-  text-rendering: geometricPrecision;
-}
-
-.ds-file-upload-row__copy {
-  min-width: 0;
-  flex: 1 1 auto;
-  display: grid;
-  gap: var(--bh-space-none);
-  text-align: start;
-}
-
-.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__copy {
-  gap: var(--bh-space-none);
-}
-
-.ds-file-upload-row--uploading-progress .ds-file-upload-row__copy {
-  gap: var(--bh-space-xxs-2);
-}
-
-.ds-file-upload-row__copy strong {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--bh-content-default);
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-file-upload-row--sm .ds-file-upload-row__copy strong {
-  font-size: var(--bh-text-body-sm-medium-font-size);
-  line-height: var(--bh-text-body-sm-medium-line-height);
-}
-
-.ds-file-upload-row__details,
-.ds-file-upload-row__headline {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-sm-regular-font-size);
-  font-weight: var(--bh-font-weight-regular);
-  line-height: var(--bh-text-body-sm-regular-line-height);
-}
-
-.ds-file-upload-row__headline {
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-file-upload-row__headline span {
-  flex: 0 0 auto;
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  line-height: var(--bh-text-body-xs-regular-line-height);
-}
-
-.ds-file-upload-row__headline strong {
-  flex: 0 1 auto;
-}
-
-.ds-file-upload-row__dot {
-  color: var(--bh-content-subtle);
-}
-
-.ds-file-upload-row__state {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-file-upload-row__state::before {
-  content: "";
-  width: var(--bh-border-width-default);
-  height: var(--bh-space-3xl-16);
-  margin-inline-end: var(--bh-space-none);
-  background: var(--bh-border-subtle);
-}
-
-.ds-file-upload-row__status {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  display: inline-grid;
-  place-items: center;
-  flex: 0 0 var(--bh-space-3xl-16);
-}
-
-.ds-file-upload-row__status svg {
-  width: var(--bh-space-3xl-16);
-  height: var(--bh-space-3xl-16);
-  stroke-width: var(--bh-icon-stroke-220);
-}
-
-.ds-file-upload-row__status--standalone {
-  margin-inline-start: auto;
-}
-
-.ds-file-upload-row__status--uploaded {
-  color: var(--bh-content-success-default);
-}
-
-.ds-file-upload-row__status--uploading {
-  color: var(--bh-content-brand-default);
-}
-
-.ds-file-upload-row__status--error {
-  color: var(--bh-content-danger-default);
-}
-
-.ds-file-upload-row__status--uploading svg {
-  animation: ds-file-upload-spin var(--bh-file-upload-spin-duration) linear infinite;
-}
-
-.ds-file-upload-row--error .ds-file-upload-row__state,
-.ds-file-upload-row--error .ds-file-upload-row__retry {
-  color: var(--bh-content-danger-default);
-}
-
-.ds-file-upload-row__retry {
-  width: max-content;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  color: var(--bh-content-danger-default);
-  font: inherit;
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  text-decoration-line: underline;
-  text-underline-offset: var(--bh-underline-offset-default);
-  cursor: pointer;
-}
-
-.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__retry {
-  margin-block-start: var(--bh-space-md-8);
-}
-
-.ds-file-upload-row__progress {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-sm-6);
-}
-
-.ds-file-upload-row__progress-track {
-  position: relative;
-  height: var(--bh-space-sm-6);
-  flex: 1 1 auto;
-  overflow: hidden;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-dim);
-}
-
-.ds-file-upload-row__progress-fill {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  border-radius: inherit;
-  background: var(--bh-bg-success-default);
-}
-
-.ds-file-upload-row__progress-label {
-  flex: 0 0 auto;
-  color: var(--bh-content-subtle);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  line-height: var(--bh-text-body-xs-regular-line-height);
-}
-
-.ds-file-upload-row__actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-}
-
-.ds-file-upload-row__action {
-  color: var(--bh-content-default);
-}
-
-.ds-file-upload-row__action svg {
-  width: var(--bh-space-4xl-20);
-  height: var(--bh-space-4xl-20);
-}
-
-.ds-file-upload:dir(rtl) {
-  font-family: var(--bh-font-family);
-}
-
-@keyframes ds-file-upload-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
+.ds-file-upload {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--bh-file-upload-root-max-width);
+  display: grid;
+  align-content: start;
+  gap: var(--bh-space-xl-12);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+}
+
+.ds-file-upload *,
+.ds-file-upload *::before,
+.ds-file-upload *::after {
+  box-sizing: border-box;
+}
+
+.ds-file-upload--sm {
+  max-width: var(--bh-file-upload-content-max-width);
+}
+
+.ds-file-upload__dropzone {
+  min-height: calc(var(--bh-space-13xl-160) + var(--bh-space-4xl-20));
+  display: grid;
+  place-items: center;
+  gap: var(--bh-space-3xl-16);
+  padding: var(--bh-space-6xl-32) var(--bh-space-5xl-24);
+  border: var(--bh-border-width-strong) dashed var(--bh-border-default);
+  border-radius: var(--bh-radius-2xl-12);
+  background: var(--bh-bg-subtle);
+  color: var(--bh-content-default);
+  text-align: center;
+  transition:
+    background-color var(--bh-duration-fast) var(--bh-easing-standard),
+    border-color var(--bh-duration-fast) var(--bh-easing-standard),
+    color var(--bh-duration-fast) var(--bh-easing-standard),
+    opacity var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+.ds-file-upload--button .ds-file-upload__dropzone {
+  min-height: var(--bh-space-16xl-256);
+  gap: var(--bh-space-5xl-24);
+  padding-inline: var(--bh-space-6xl-32);
+}
+
+.ds-file-upload__dropzone:hover,
+.ds-file-upload__dropzone.is-hover {
+  border-color: var(--bh-border-strong);
+}
+
+.ds-file-upload__dropzone[aria-disabled="true"] {
+  border-color: var(--bh-border-disabled);
+  color: var(--bh-content-disabled);
+  cursor: not-allowed;
+}
+
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__helper,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__browse,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__title {
+  color: var(--bh-content-disabled);
+}
+
+.ds-file-upload__input {
+  display: none;
+}
+
+.ds-file-upload__icon {
+  width: var(--bh-space-8xl-48);
+  height: var(--bh-space-8xl-48);
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: var(--bh-radius-2xl-12);
+  background: var(--bh-bg-default);
+  color: var(--bh-content-default);
+  box-shadow:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
+    var(--elevation-component-default);
+}
+
+.ds-file-upload__dropzone:hover .ds-file-upload__icon,
+.ds-file-upload__dropzone.is-hover .ds-file-upload__icon,
+.ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__icon {
+  box-shadow:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
+    var(--elevation-component-default);
+}
+
+.ds-file-upload__icon svg {
+  width: var(--bh-space-5xl-24);
+  height: var(--bh-space-5xl-24);
+  stroke-width: var(--bh-icon-stroke-200);
+}
+
+.ds-file-upload__copy {
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload--button .ds-file-upload__copy {
+  gap: var(--bh-space-md-8);
+}
+
+.ds-file-upload__title {
+  margin: 0;
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
+}
+
+.ds-file-upload--button .ds-file-upload__title {
+  font-size: var(--bh-text-body-lg-semibold-font-size);
+  font-weight: var(--bh-font-weight-semibold);
+  line-height: var(--bh-text-body-lg-semibold-line-height);
+}
+
+.ds-file-upload__browse {
+  border: 0;
+  background: transparent;
+  color: var(--bh-content-link);
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.ds-file-upload__browse:hover {
+  color: var(--bh-content-link-hover);
+}
+
+.ds-file-upload__browse:focus-visible,
+.ds-file-upload-row__retry:focus-visible {
+  border-radius: var(--bh-radius-sm-4);
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.ds-file-upload__helper {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-md-regular-line-height);
+}
+
+.ds-file-upload__button {
+  width: calc(var(--bh-space-13xl-160) + var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
+}
+
+.ds-file-upload__list {
+  display: grid;
+  align-content: start;
+  gap: var(--bh-space-xl-12);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-file-upload-row {
+  --ds-file-upload-row-border: var(--bh-border-subtle);
+  --ds-file-upload-row-elevation:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
+    var(--elevation-component-default);
+
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xl-12);
+  padding: var(--bh-space-3xl-16);
+  border: 0;
+  border-radius: var(--bh-radius-2xl-12);
+  background: var(--bh-bg-raised);
+  box-shadow: var(--ds-file-upload-row-elevation);
+  overflow: clip;
+}
+
+.ds-file-upload-row--sm {
+  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  gap: var(--bh-space-md-8);
+  padding: var(--bh-space-xl-12);
+  border-radius: var(--bh-radius-lg-8);
+}
+
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg {
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-lg-10));
+}
+
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--sm {
+  min-height: var(--bh-space-9xl-64);
+}
+
+.ds-file-upload-row--error {
+  --ds-file-upload-row-border: var(--bh-border-danger-strong);
+  --ds-file-upload-row-elevation:
+    inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
+    var(--elevation-02);
+}
+
+.ds-file-upload-row__content {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xl-12);
+}
+
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__content,
+.ds-file-upload-row--uploading-progress.ds-file-upload-row--lg .ds-file-upload-row__content {
+  align-items: flex-start;
+}
+
+.ds-file-upload-row--sm .ds-file-upload-row__content {
+  gap: var(--bh-space-xl-12);
+}
+
+.ds-file-upload-file-icon {
+  --ds-file-upload-file-page-fill: var(--bh-bg-neutral-subtle);
+
+  position: relative;
+  width: var(--bh-space-7xl-40);
+  height: var(--bh-space-7xl-40);
+  display: block;
+  flex: 0 0 var(--bh-space-7xl-40);
+  color: var(--bh-content-subtle);
+}
+
+.ds-file-upload-file-icon--sm {
+  width: var(--bh-space-6xl-32);
+  height: var(--bh-space-6xl-32);
+  flex-basis: var(--bh-space-6xl-32);
+}
+
+.ds-file-upload-file-icon__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+
+.ds-file-upload-file-icon__page {
+  fill: var(--ds-file-upload-file-page-fill);
+  stroke: currentColor;
+}
+
+.ds-file-upload-file-icon__fold {
+  stroke: currentColor;
+}
+
+.ds-file-upload-file-icon__badge {
+  fill: var(--ds-file-upload-file-badge-bg);
+}
+
+.ds-file-upload-file-icon__label {
+  fill: var(--bh-content-on-color);
+  font-family: var(--bh-font-family);
+  font-size: calc(var(--bh-space-lg-10) - var(--bh-space-xxxs-1));
+  font-weight: var(--bh-font-weight-bold);
+  letter-spacing: var(--bh-text-base-letter-spacing);
+  line-height: 1;
+  pointer-events: none;
+  text-rendering: geometricPrecision;
+}
+
+.ds-file-upload-row__copy {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: grid;
+  gap: var(--bh-space-none);
+  text-align: start;
+}
+
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__copy {
+  gap: var(--bh-space-none);
+}
+
+.ds-file-upload-row--uploading-progress .ds-file-upload-row__copy {
+  gap: var(--bh-space-xxs-2);
+}
+
+.ds-file-upload-row__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--bh-content-default);
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-file-upload-row--sm .ds-file-upload-row__copy strong {
+  font-size: var(--bh-text-body-sm-medium-font-size);
+  line-height: var(--bh-text-body-sm-medium-line-height);
+}
+
+.ds-file-upload-row__details,
+.ds-file-upload-row__headline {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-font-weight-regular);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+
+.ds-file-upload-row__headline {
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__headline span {
+  flex: 0 0 auto;
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+}
+
+.ds-file-upload-row__headline strong {
+  flex: 0 1 auto;
+}
+
+.ds-file-upload-row__dot {
+  color: var(--bh-content-subtle);
+}
+
+.ds-file-upload-row__state {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__state::before {
+  content: "";
+  width: var(--bh-border-width-default);
+  height: var(--bh-space-3xl-16);
+  margin-inline-end: var(--bh-space-none);
+  background: var(--bh-border-subtle);
+}
+
+.ds-file-upload-row__status {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 var(--bh-space-3xl-16);
+}
+
+.ds-file-upload-row__status svg {
+  width: var(--bh-space-3xl-16);
+  height: var(--bh-space-3xl-16);
+  stroke-width: var(--bh-icon-stroke-220);
+}
+
+.ds-file-upload-row__status--standalone {
+  margin-inline-start: auto;
+}
+
+.ds-file-upload-row__status--uploaded {
+  color: var(--bh-content-success-default);
+}
+
+.ds-file-upload-row__status--uploading {
+  color: var(--bh-content-brand-default);
+}
+
+.ds-file-upload-row__status--error {
+  color: var(--bh-content-danger-default);
+}
+
+.ds-file-upload-row__status--uploading svg {
+  animation: ds-file-upload-spin var(--bh-file-upload-spin-duration) linear infinite;
+}
+
+.ds-file-upload-row--error .ds-file-upload-row__state,
+.ds-file-upload-row--error .ds-file-upload-row__retry {
+  color: var(--bh-content-danger-default);
+}
+
+.ds-file-upload-row__retry {
+  width: max-content;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--bh-content-danger-default);
+  font: inherit;
+  font-size: var(--bh-text-body-md-medium-font-size);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
+  text-decoration-line: underline;
+  text-underline-offset: var(--bh-underline-offset-default);
+  cursor: pointer;
+}
+
+.ds-file-upload-row--error.ds-file-upload-row--lg .ds-file-upload-row__retry {
+  margin-block-start: var(--bh-space-md-8);
+}
+
+.ds-file-upload-row__progress {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-sm-6);
+}
+
+.ds-file-upload-row__progress-track {
+  position: relative;
+  height: var(--bh-space-sm-6);
+  flex: 1 1 auto;
+  overflow: hidden;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-bg-dim);
+}
+
+.ds-file-upload-row__progress-fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  border-radius: inherit;
+  background: var(--bh-bg-success-default);
+}
+
+.ds-file-upload-row__progress-label {
+  flex: 0 0 auto;
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+}
+
+.ds-file-upload-row__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+}
+
+.ds-file-upload-row__action {
+  color: var(--bh-content-default);
+}
+
+.ds-file-upload-row__action svg {
+  width: var(--bh-icon-size-default);
+  height: var(--bh-icon-size-default);
+}
+
+.ds-file-upload:dir(rtl) {
+  font-family: var(--bh-font-family);
+}
+
+@keyframes ds-file-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}