banhaten 0.1.2 → 0.2.0

package/registry/components/expanded/slideout.css

@@ -127,6 +127,12 @@
   padding-left: var(--slideout-space-3xl);
 }
 
+.ds-slideout__close-icon {
+  width: var(--slideout-space-4xl);
+  height: var(--slideout-space-4xl);
+  stroke-width: var(--bh-icon-stroke-220);
+}
+
 .ds-slideout__heading-wrap {
   display: flex;
   flex: 1 1 0;
@@ -153,11 +159,7 @@
 
 .ds-slideout__text-button,
 .ds-slideout__close,
-.ds-slideout__button,
-.ds-payment-detail__story,
-.ds-payment-form__select,
-.ds-feed-item__files button,
-.ds-slideout-profile__tab {
+.ds-slideout__button {
   border: 0;
   margin: 0;
   font: inherit;
@@ -259,20 +261,13 @@
 
 .ds-slideout__text-button:hover,
 .ds-slideout__close:hover,
-.ds-slideout__button--secondary:hover,
-.ds-payment-detail__story:hover,
-.ds-feed-item__files button:hover,
-.ds-slideout-profile__tab:hover {
+.ds-slideout__button--secondary:hover {
   background: var(--bh-interactive-ghost-hover);
 }
 
 .ds-slideout__text-button:focus-visible,
 .ds-slideout__close:focus-visible,
-.ds-slideout__button:focus-visible,
-.ds-payment-detail__story:focus-visible,
-.ds-payment-form__select:focus-visible,
-.ds-feed-item__files button:focus-visible,
-.ds-slideout-profile__tab:focus-visible {
+.ds-slideout__button:focus-visible {
   outline: var(--slideout-space-xxs) solid var(--slideout-brand);
   outline-offset: var(--slideout-space-xxs);
 }
@@ -283,674 +278,3 @@
   width: 100%;
   min-width: 0;
 }
-
-.ds-slideout-filters {
-  gap: var(--slideout-space-5xl);
-}
-
-.ds-filter-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-3xl);
-  width: 100%;
-}
-
-.ds-filter-section h3,
-.ds-payment-card h3,
-.ds-payment-form__section h3 {
-  margin: 0;
-  color: var(--slideout-content-default);
-  font-size: var(--bh-text-heading-xs-medium-font-size);
-  font-weight: var(--bh-text-heading-xs-medium-font-weight);
-  line-height: var(--bh-text-heading-xs-medium-line-height);
-}
-
-.ds-filter-section__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-xl);
-  width: 100%;
-}
-
-.ds-choice-row {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-md);
-  width: 100%;
-  min-height: var(--slideout-space-5xl);
-}
-
-.ds-choice-row__control {
-  position: relative;
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: var(--slideout-choice-size);
-  height: var(--slideout-choice-size);
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-input);
-  color: var(--slideout-on-brand);
-  background: var(--slideout-bg-default);
-  box-shadow: var(--shadow-checkbox-control);
-}
-
-.ds-choice-row__control--checkbox {
-  border-radius: var(--bh-radius-sm-4);
-}
-
-.ds-choice-row__control--radio {
-  border-radius: var(--slideout-radius-full);
-}
-
-.ds-choice-row__control.is-checked {
-  border-color: var(--slideout-brand);
-  background: var(--slideout-brand);
-}
-
-.ds-choice-row__dot {
-  width: var(--slideout-dot-size);
-  height: var(--slideout-dot-size);
-  border-radius: var(--slideout-radius-full);
-  background: var(--slideout-on-brand);
-}
-
-.ds-choice-row__label {
-  flex: 1 1 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.ds-slideout-divider {
-  display: block;
-  width: 100%;
-  height: var(--bh-space-xxxs-1);
-  background: var(--slideout-border-subtle);
-}
-
-.ds-user-choice {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--slideout-space-md);
-  width: 100%;
-  min-height: var(--slideout-control-height-lg);
-  padding-block: var(--slideout-space-md);
-}
-
-.ds-user-choice__person {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-md);
-  min-width: 0;
-}
-
-.ds-user-choice__person span:last-child {
-  min-width: 0;
-  color: var(--slideout-content-default);
-  font-weight: var(--bh-font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-user-choice__person .is-muted {
-  color: var(--slideout-content-subtle);
-}
-
-.ds-user-choice__check {
-  flex: 0 0 auto;
-  color: var(--slideout-content-default);
-}
-
-.ds-avatar {
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-  border-radius: var(--slideout-radius-full);
-  background:
-    radial-gradient(circle at 65% 28%, var(--bh-bg-always-white), transparent 18%),
-    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-always-dark) 55%, var(--bh-bg-accent-amber-soft));
-  color: var(--slideout-on-color);
-  font-size: var(--bh-text-body-3xs-semibold-font-size);
-  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
-  line-height: var(--bh-text-body-3xs-semibold-line-height);
-  text-transform: uppercase;
-}
-
-.ds-avatar--small {
-  width: var(--slideout-space-5xl);
-  height: var(--slideout-space-5xl);
-}
-
-.ds-avatar--medium {
-  width: var(--slideout-control-height-lg);
-  height: var(--slideout-control-height-lg);
-  font-size: var(--bh-text-body-xs-medium-font-size);
-}
-
-.ds-avatar--large {
-  width: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
-  height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
-  font-size: var(--bh-text-body-md-medium-font-size);
-}
-
-.ds-avatar__status {
-  position: absolute;
-  right: var(--slideout-avatar-status-offset);
-  bottom: var(--slideout-avatar-status-offset);
-  width: var(--slideout-space-2xl);
-  height: var(--slideout-space-2xl);
-  border: var(--slideout-space-xxs) solid var(--slideout-bg-raised);
-  border-radius: var(--slideout-radius-full);
-  background: var(--bh-bg-success-default);
-}
-
-.ds-slideout-profile {
-  gap: var(--slideout-space-6xl);
-}
-
-.ds-slideout-profile__header {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-xl);
-  width: 100%;
-}
-
-.ds-slideout-profile__identity {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: var(--slideout-space-xxs);
-  min-width: 0;
-}
-
-.ds-slideout-profile__name,
-.ds-slideout-profile__role,
-.ds-feed-item p,
-.ds-feed-item time,
-.ds-payment-detail p,
-.ds-payment-form p {
-  margin: 0;
-}
-
-.ds-slideout-profile__name {
-  color: var(--slideout-content-default);
-  font-size: var(--bh-text-heading-xs-medium-font-size);
-  font-weight: var(--bh-text-heading-xs-medium-font-weight);
-  line-height: var(--bh-text-heading-xs-medium-line-height);
-}
-
-.ds-slideout-profile__role {
-  color: var(--slideout-content-subtle);
-}
-
-.ds-slideout-profile__tabs {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-3xl);
-  min-height: var(--slideout-control-height-lg);
-  width: 100%;
-  overflow-x: auto;
-  border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-default);
-}
-
-.ds-slideout-profile__tab {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--slideout-space-xs);
-  min-height: var(--slideout-control-height-lg);
-  padding: var(--slideout-space-md) 0;
-  border-bottom: var(--slideout-space-xxs) solid transparent;
-  color: var(--slideout-content-subtle);
-  background: transparent;
-  white-space: nowrap;
-}
-
-.ds-slideout-profile__tab[aria-selected="true"] {
-  border-bottom-color: var(--slideout-brand);
-  color: var(--slideout-content-default);
-  font-weight: var(--bh-font-weight-medium);
-}
-
-.ds-slideout-profile__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--slideout-space-5xl);
-  height: var(--slideout-space-5xl);
-  padding-inline: var(--slideout-space-xs);
-  border-radius: var(--slideout-radius-full);
-  background: var(--slideout-bg-neutral);
-  color: var(--slideout-content-default);
-  font-size: var(--bh-text-body-3xs-semibold-font-size);
-  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
-  line-height: var(--bh-text-body-3xs-semibold-line-height);
-}
-
-.ds-slideout-feed {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-4xl);
-  width: 100%;
-}
-
-.ds-feed-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-3xl);
-  width: 100%;
-}
-
-.ds-feed-item__heading {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--slideout-space-4xl);
-  width: 100%;
-}
-
-.ds-feed-item__copy {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: var(--slideout-space-xs);
-  min-width: 0;
-}
-
-.ds-feed-item__copy p {
-  color: var(--slideout-content-subtle);
-  overflow-wrap: anywhere;
-}
-
-.ds-feed-item__copy strong {
-  color: var(--slideout-content-default);
-  font-weight: var(--bh-font-weight-medium);
-}
-
-.ds-feed-item__copy a {
-  color: var(--slideout-content-link);
-  font-weight: var(--bh-font-weight-medium);
-  text-decoration: none;
-}
-
-.ds-feed-item time {
-  color: var(--slideout-content-subtle);
-}
-
-.ds-feed-item__indicator {
-  width: var(--slideout-dot-size);
-  height: var(--slideout-dot-size);
-  margin-top: calc(var(--slideout-space-lg) - var(--bh-space-xxxs-1));
-  border-radius: var(--slideout-radius-full);
-  background: var(--slideout-content-success);
-}
-
-.ds-feed-item__comment {
-  width: 100%;
-  padding: var(--slideout-space-xl);
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-  border-radius: var(--slideout-radius-lg);
-  color: var(--slideout-content-subtle);
-  background: var(--slideout-bg-default);
-}
-
-.ds-feed-item__images {
-  display: flex;
-  gap: var(--slideout-space-xl);
-  width: 100%;
-  overflow: hidden;
-}
-
-.ds-feed-item__image {
-  display: block;
-  flex: 1 1 0;
-  min-width: calc(var(--bh-space-12xl-128) - var(--slideout-space-md));
-  height: calc(var(--bh-space-11xl-96) + var(--slideout-space-xs));
-  border-radius: var(--slideout-radius-lg);
-  background-size: cover;
-  background-position: center;
-}
-
-.ds-feed-item__image--one {
-  background:
-    radial-gradient(circle at 50% 28%, var(--bh-bg-warning-subtle) 0 8%, transparent 9%),
-    radial-gradient(circle at 52% 34%, var(--bh-bg-always-white) 0 12%, transparent 13%),
-    linear-gradient(145deg, var(--bh-bg-accent-aqua-soft), var(--bh-bg-accent-amber-soft));
-}
-
-.ds-feed-item__image--two {
-  background:
-    radial-gradient(circle at 70% 35%, var(--bh-bg-always-white), transparent 22%),
-    linear-gradient(135deg, var(--bh-bg-accent-purple-default), var(--bh-bg-accent-rose-soft) 55%, var(--bh-bg-warning-soft));
-}
-
-.ds-feed-item__files {
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-  border-radius: var(--slideout-radius-lg);
-  background: var(--slideout-bg-default);
-  box-shadow: var(--slideout-shadow-surface);
-}
-
-.ds-file-row {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-md);
-  min-height: var(--slideout-control-height-lg);
-  padding: var(--slideout-space-md) var(--slideout-space-lg);
-  color: var(--slideout-content-default);
-}
-
-.ds-file-row + .ds-file-row {
-  border-top: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-}
-
-.ds-file-row svg {
-  flex: 0 0 auto;
-  color: var(--slideout-content-subtle);
-}
-
-.ds-file-row span {
-  flex: 1 1 0;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-file-row button {
-  flex: 0 0 auto;
-  padding: 0;
-  color: var(--slideout-content-link);
-  background: transparent;
-}
-
-.ds-payment-detail,
-.ds-payment-form {
-  gap: var(--slideout-space-4xl);
-}
-
-.ds-payment-detail__hero,
-.ds-payment-card {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-  border-radius: var(--slideout-radius-xl);
-}
-
-.ds-payment-detail__hero {
-  gap: var(--slideout-space-4xl);
-  padding: var(--slideout-space-4xl);
-  background: var(--slideout-bg-dim);
-}
-
-.ds-payment-detail__user {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-xl);
-  min-width: 0;
-}
-
-.ds-payment-detail__name {
-  color: var(--slideout-content-default);
-  font-size: var(--bh-text-heading-xs-medium-font-size);
-  font-weight: var(--bh-text-heading-xs-medium-font-weight);
-  line-height: var(--bh-text-heading-xs-medium-line-height);
-}
-
-.ds-payment-detail__muted,
-.ds-payment-detail__date,
-.ds-payment-form__date,
-.ds-payment-form__field span,
-.ds-payment-form__upload-copy span {
-  color: var(--slideout-content-subtle);
-}
-
-.ds-payment-detail__amount,
-.ds-payment-form__value {
-  color: var(--slideout-content-default);
-  font-size: var(--bh-text-heading-md-semibold-font-size);
-  font-weight: var(--bh-font-weight-bold);
-  line-height: var(--bh-text-heading-md-semibold-line-height);
-}
-
-.ds-payment-detail__date {
-  font-size: var(--bh-text-body-lg-regular-font-size);
-  line-height: var(--bh-text-body-lg-regular-line-height);
-}
-
-.ds-payment-card {
-  gap: var(--slideout-space-4xl);
-  padding: var(--slideout-space-4xl);
-  background: var(--slideout-bg-raised);
-}
-
-.ds-payment-detail__rows {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-3xl);
-}
-
-.ds-payment-detail__row,
-.ds-payment-detail__transaction {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--slideout-space-xl);
-  min-width: 0;
-}
-
-.ds-payment-detail__row span {
-  color: var(--slideout-content-subtle);
-}
-
-.ds-payment-detail__row strong,
-.ds-payment-detail__transaction span,
-.ds-payment-form__field strong {
-  color: var(--slideout-content-default);
-  font-weight: var(--bh-font-weight-medium);
-}
-
-.ds-payment-detail__transaction span {
-  flex: 1 1 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.ds-payment-detail__copy {
-  min-height: var(--slideout-control-height-md);
-  padding-inline: var(--slideout-space-lg);
-}
-
-.ds-payment-detail__story {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: var(--slideout-control-height-md);
-  padding: var(--slideout-space-md);
-  border-radius: var(--slideout-radius-control);
-  color: var(--slideout-content-link);
-  background: transparent;
-  font-weight: var(--bh-font-weight-medium);
-}
-
-.ds-payment-form__amount {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-3xl);
-  width: 100%;
-  padding-bottom: var(--slideout-space-3xl);
-  border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-}
-
-.ds-payment-form__amount-copy {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: var(--slideout-space-xs);
-  min-width: 0;
-}
-
-.ds-payment-form__export {
-  flex: 0 0 auto;
-  min-height: var(--slideout-control-height-md);
-}
-
-.ds-company-icon {
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--bh-space-8xl-48) + var(--slideout-space-md));
-  height: calc(var(--bh-space-8xl-48) + var(--slideout-space-md));
-  overflow: hidden;
-  border-radius: var(--slideout-radius-full);
-  background: linear-gradient(135deg, var(--bh-bg-accent-purple-default), var(--bh-bg-brand-default));
-}
-
-.ds-company-icon span,
-.ds-company-icon::before,
-.ds-company-icon::after {
-  position: absolute;
-  display: block;
-  width: calc(var(--bh-space-8xl-48) - var(--slideout-space-xxs));
-  height: var(--slideout-space-md);
-  border-radius: var(--slideout-radius-full);
-  background: var(--slideout-on-color);
-  content: "";
-}
-
-.ds-company-icon span {
-  transform: translateY(calc(-1 * (var(--slideout-space-xl) - var(--bh-space-xxxs-1)))) rotate(7deg);
-}
-
-.ds-company-icon::before {
-  transform: rotate(7deg);
-}
-
-.ds-company-icon::after {
-  transform: translateY(calc(var(--slideout-space-xl) - var(--bh-space-xxxs-1))) rotate(7deg);
-}
-
-.ds-payment-form__grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--slideout-space-4xl) var(--slideout-space-xl);
-}
-
-.ds-payment-form__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--slideout-space-xs);
-  min-width: 0;
-}
-
-.ds-payment-form__field span {
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-}
-
-.ds-payment-form__field strong {
-  overflow-wrap: anywhere;
-}
-
-.ds-payment-form__section {
-  gap: var(--slideout-space-xl);
-}
-
-.ds-payment-form__select {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--slideout-space-md);
-  width: 100%;
-  min-height: var(--slideout-control-height-lg);
-  padding: 0 var(--slideout-space-lg) 0 var(--slideout-space-xl);
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-input);
-  border-radius: var(--slideout-radius-lg);
-  color: var(--slideout-content-default);
-  background: var(--slideout-bg-default);
-  box-shadow: var(--shadow-input);
-}
-
-.ds-payment-form__select span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-payment-form__upload {
-  display: flex;
-  align-items: center;
-  gap: var(--slideout-space-xl);
-  width: 100%;
-  padding: var(--slideout-space-3xl);
-  border: var(--bh-space-xxxs-1) dashed var(--slideout-border-default);
-  border-radius: var(--slideout-radius-lg);
-  background: var(--slideout-bg-muted);
-}
-
-.ds-payment-form__upload-icon {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: var(--slideout-control-height-lg);
-  height: var(--slideout-control-height-lg);
-  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
-  border-radius: var(--slideout-radius-lg);
-  color: var(--slideout-content-default);
-  background: var(--slideout-bg-default);
-  box-shadow: var(--slideout-shadow-surface);
-}
-
-.ds-payment-form__upload-copy {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: var(--slideout-space-xxs);
-  min-width: 0;
-}
-
-.ds-payment-form__upload-copy strong {
-  color: var(--slideout-content-default);
-  font-weight: var(--bh-font-weight-medium);
-  overflow-wrap: anywhere;
-}
-
-.ds-payment-form__upload-copy span {
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-  overflow-wrap: anywhere;
-}
-
-.ds-slideout--rtl .ds-slideout-profile__identity,
-.ds-slideout--rtl .ds-feed-item__copy,
-.ds-slideout--rtl .ds-payment-form__amount-copy,
-.ds-slideout--rtl .ds-payment-form__field,
-.ds-slideout--rtl .ds-payment-form__upload-copy,
-.ds-slideout--rtl .ds-payment-card,
-.ds-slideout--rtl .ds-payment-detail__hero {
-  align-items: flex-end;
-  text-align: right;
-}
-
-.ds-slideout--rtl .ds-payment-detail__row {
-  flex-direction: row-reverse;
-}
-
-.ds-slideout--rtl .ds-payment-form__upload {
-  flex-direction: row-reverse;
-}
-
-.ds-slideout--rtl .ds-payment-form__select {
-  padding-right: var(--slideout-space-xl);
-  padding-left: var(--slideout-space-lg);
-}