banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/TimelineShowcase.tsx

@@ -1,158 +0,0 @@
-import {
-  Timeline,
-  TimelineItem,
-  type TimelineItemState,
-  type TimelineOrientation,
-  type TimelineVariant,
-} from "./Timeline";
-
-type TimelineSpec = {
-  height: number;
-  id: string;
-  rtl: boolean;
-  variant: TimelineVariant;
-  width: number;
-  x: number;
-  y: number;
-};
-
-type TimelineItemSpec = TimelineSpec & {
-  orientation: TimelineOrientation;
-  state: TimelineItemState;
-};
-
-const verticalTimelineSpecs: TimelineSpec[] = [
-  { id: "572:6755", variant: "default", rtl: false, x: 225, y: 164, width: 600, height: 532 },
-  { id: "584:11474", variant: "icon", rtl: false, x: 1163, y: 164, width: 600, height: 532 },
-  { id: "573:6936", variant: "default", rtl: true, x: 225, y: 767, width: 600, height: 532 },
-  { id: "584:11482", variant: "icon", rtl: true, x: 1163, y: 767, width: 600, height: 532 },
-];
-
-const horizontalTimelineSpecs: TimelineSpec[] = [
-  { id: "584:4500", variant: "default", rtl: false, x: 274, y: 207, width: 1000, height: 128 },
-  { id: "584:15619", variant: "icon", rtl: false, x: 274, y: 405, width: 1000, height: 136 },
-  { id: "584:4581", variant: "default", rtl: true, x: 274, y: 770, width: 1000, height: 128 },
-  { id: "584:15855", variant: "icon", rtl: true, x: 274, y: 968, width: 1000, height: 136 },
-];
-
-const verticalItemSpecs: TimelineItemSpec[] = [
-  { id: "572:6443", orientation: "vertical", variant: "default", state: "finished", rtl: false, x: 150, y: 152, width: 500, height: 126 },
-  { id: "584:10301", orientation: "vertical", variant: "icon", state: "finished", rtl: false, x: 790, y: 143, width: 500, height: 126 },
-  { id: "572:6442", orientation: "vertical", variant: "default", state: "active", rtl: false, x: 150, y: 298, width: 500, height: 126 },
-  { id: "584:10317", orientation: "vertical", variant: "icon", state: "active", rtl: false, x: 790, y: 289, width: 500, height: 126 },
-  { id: "572:6441", orientation: "vertical", variant: "default", state: "inactive", rtl: false, x: 150, y: 461, width: 500, height: 126 },
-  { id: "584:10333", orientation: "vertical", variant: "icon", state: "inactive", rtl: false, x: 790, y: 452, width: 500, height: 126 },
-  { id: "572:6769", orientation: "vertical", variant: "default", state: "finished", rtl: true, x: 154, y: 758, width: 500, height: 126 },
-  { id: "584:11212", orientation: "vertical", variant: "icon", state: "finished", rtl: true, x: 785, y: 758, width: 500, height: 126 },
-  { id: "572:6785", orientation: "vertical", variant: "default", state: "active", rtl: true, x: 154, y: 908, width: 500, height: 126 },
-  { id: "584:11228", orientation: "vertical", variant: "icon", state: "active", rtl: true, x: 785, y: 908, width: 500, height: 126 },
-  { id: "572:6801", orientation: "vertical", variant: "default", state: "inactive", rtl: true, x: 154, y: 1058, width: 500, height: 126 },
-  { id: "584:11244", orientation: "vertical", variant: "icon", state: "inactive", rtl: true, x: 785, y: 1058, width: 500, height: 126 },
-];
-
-const horizontalItemSpecs: TimelineItemSpec[] = [
-  { id: "582:4215", orientation: "horizontal", variant: "default", state: "finished", rtl: false, x: 311, y: 168, width: 240, height: 128 },
-  { id: "584:4325", orientation: "horizontal", variant: "default", state: "active", rtl: false, x: 595, y: 168, width: 240, height: 128 },
-  { id: "584:4351", orientation: "horizontal", variant: "default", state: "inactive", rtl: false, x: 864, y: 168, width: 240, height: 128 },
-  { id: "584:14794", orientation: "horizontal", variant: "icon", state: "finished", rtl: false, x: 311, y: 346, width: 240, height: 136 },
-  { id: "584:14807", orientation: "horizontal", variant: "icon", state: "active", rtl: false, x: 595, y: 346, width: 240, height: 136 },
-  { id: "584:14820", orientation: "horizontal", variant: "icon", state: "inactive", rtl: false, x: 864, y: 346, width: 240, height: 136 },
-  { id: "582:4231", orientation: "horizontal", variant: "default", state: "finished", rtl: true, x: 854, y: 630, width: 240, height: 128 },
-  { id: "584:4382", orientation: "horizontal", variant: "default", state: "active", rtl: true, x: 577, y: 630, width: 240, height: 128 },
-  { id: "584:4408", orientation: "horizontal", variant: "default", state: "inactive", rtl: true, x: 311, y: 630, width: 240, height: 128 },
-  { id: "584:14884", orientation: "horizontal", variant: "icon", state: "finished", rtl: true, x: 854, y: 804, width: 240, height: 136 },
-  { id: "584:14897", orientation: "horizontal", variant: "icon", state: "active", rtl: true, x: 577, y: 804, width: 240, height: 136 },
-  { id: "584:14910", orientation: "horizontal", variant: "icon", state: "inactive", rtl: true, x: 311, y: 804, width: 240, height: 136 },
-];
-
-function timelineSteps(count: number, rtl = false) {
-  return Array.from({ length: count }, (_, index) => ({
-    caption: rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption",
-    date: "Mar 15. 2050",
-    id: `timeline-step-${index}`,
-    label: rtl ? "\u0645\u0644\u0635\u0642" : "Label",
-    state: "finished" as const,
-  }));
-}
-
-function placement(spec: TimelineSpec) {
-  return {
-    height: spec.height,
-    left: spec.x,
-    top: spec.y,
-    width: spec.width,
-  };
-}
-
-export function TimelineShowcase() {
-  return (
-    <section className="timeline-showcase" aria-label="Figma Timeline component matrix">
-      <div className="timeline-showcase__row">
-        <div className="timeline-canvas timeline-canvas--vertical" data-node-id="572:6768">
-          {verticalTimelineSpecs.map((spec) => (
-            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
-              <Timeline
-                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} vertical timeline`}
-                dir={spec.rtl ? "rtl" : "ltr"}
-                orientation="vertical"
-                steps={timelineSteps(7, spec.rtl)}
-                variant={spec.variant}
-              />
-            </div>
-          ))}
-        </div>
-
-        <div className="timeline-canvas timeline-canvas--horizontal" data-node-id="584:4501">
-          {horizontalTimelineSpecs.map((spec) => (
-            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
-              <Timeline
-                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} horizontal timeline`}
-                dir={spec.rtl ? "rtl" : "ltr"}
-                orientation="horizontal"
-                steps={timelineSteps(6, spec.rtl)}
-                variant={spec.variant}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="timeline-showcase__row">
-        <div className="timeline-canvas timeline-canvas--vertical-items" data-node-id="572:6444">
-          {verticalItemSpecs.map((spec) => (
-            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
-              <TimelineItem
-                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
-                date="Mar 15. 2050"
-                dir={spec.rtl ? "rtl" : "ltr"}
-                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
-                orientation="vertical"
-                showBottomDate
-                showTopDate
-                state={spec.state}
-                variant={spec.variant}
-              />
-            </div>
-          ))}
-        </div>
-
-        <div className="timeline-canvas timeline-canvas--horizontal-items" data-node-id="582:4214">
-          {horizontalItemSpecs.map((spec) => (
-            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
-              <TimelineItem
-                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
-                date="Mar 15. 2050"
-                dir={spec.rtl ? "rtl" : "ltr"}
-                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
-                orientation="horizontal"
-                showTopDate
-                state={spec.state}
-                variant={spec.variant}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

package/registry/components/expanded/commandBar.css

@@ -1,470 +0,0 @@
-.ds-command-bar {
-  --command-bg-raised: var(--bh-bg-raised);
-  --command-bg-neutral-soft: var(--bh-bg-neutral-soft);
-  --command-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
-  --command-border-default: var(--bh-border-default);
-  --command-border-input: var(--bh-border-input);
-  --command-border-subtle: var(--bh-border-subtle);
-  --command-content-default: var(--bh-content-default);
-  --command-content-muted: var(--bh-content-muted);
-  --command-content-subtle: var(--bh-content-subtle);
-  --command-control-default: var(--bh-control-default);
-  --command-input-default: var(--bh-interactive-input-default);
-  --command-interactive-hover: var(--bh-interactive-ghost-hover);
-  --command-interactive-soft: var(--bh-interactive-soft-default);
-  --command-radius-3xl: var(--bh-radius-3xl-16);
-  --command-radius-full: var(--bh-radius-full);
-  --command-radius-lg: var(--bh-radius-lg-8);
-  --command-radius-md: var(--bh-radius-md-6);
-  --command-space-xs: var(--bh-space-xs-4);
-  --command-space-sm: var(--bh-space-sm-6);
-  --command-space-md: var(--bh-space-md-8);
-  --command-space-xl: var(--bh-space-xl-12);
-  --command-space-3xl: var(--bh-space-3xl-16);
-  --command-space-4xl: var(--bh-space-4xl-20);
-  --command-space-5xl: var(--bh-space-5xl-24);
-  --command-space-10xl: var(--bh-space-10xl-80);
-  --command-width-desktop: calc(var(--bh-space-18xl-320) + var(--bh-space-18xl-320));
-  --command-width-mobile: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
-  --command-height-mobile: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
-  --command-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
-  --command-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320) + var(--bh-space-xs-4));
-  --command-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320));
-  --command-height-empty: calc(var(--bh-space-18xl-320) - var(--bh-space-xs-4));
-  --command-content-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-5xl-24));
-  --command-content-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-4xl-20));
-  --command-search-mobile-height: var(--bh-space-8xl-48);
-  --command-item-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
-  --command-icon-size: var(--bh-space-6xl-32);
-  --command-close-size: var(--bh-space-5xl-24);
-  --command-shortcut-height: var(--bh-space-5xl-24);
-  --command-shortcut-icon-size: var(--bh-space-3xl-16);
-  --command-shortcut-min-width: var(--bh-space-7xl-40);
-  --command-empty-mobile-padding: calc(var(--bh-space-13xl-160) + var(--bh-space-5xl-24));
-  --command-shadow-surface: var(--shadow-component-default);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: var(--command-width-desktop);
-  max-width: var(--command-width-desktop);
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  background: var(--command-bg-raised);
-  color: var(--command-content-default);
-  font-family: var(--bh-font-family);
-  font-size: var(--bh-text-body-md-regular-font-size);
-  font-style: normal;
-  font-weight: var(--bh-text-body-md-regular-font-weight);
-  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
-  line-height: var(--bh-text-body-md-regular-line-height);
-}
-
-.ds-command-bar *,
-.ds-command-bar *::before,
-.ds-command-bar *::after {
-  box-sizing: border-box;
-}
-
-.ds-command-bar button {
-  font: inherit;
-}
-
-.ds-command-bar svg {
-  display: block;
-  flex: 0 0 auto;
-}
-
-.ds-command-bar--desktop {
-  border-radius: var(--command-radius-3xl);
-  box-shadow: var(--command-shadow-surface);
-}
-
-.ds-command-bar--mobile {
-  width: var(--command-width-mobile);
-  height: var(--command-height-mobile);
-  max-width: var(--command-width-mobile);
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.ds-command-bar--desktop.ds-command-bar--default {
-  height: var(--command-height-default);
-}
-
-.ds-command-bar--desktop.ds-command-bar--recent {
-  height: var(--command-height-recent);
-}
-
-.ds-command-bar--desktop.ds-command-bar--results {
-  height: var(--command-height-results);
-}
-
-.ds-command-bar--desktop.ds-command-bar--no-result {
-  height: var(--command-height-empty);
-}
-
-.ds-command-bar--rtl {
-  font-family: var(--bh-font-family);
-}
-
-.ds-command-bar__input-wrap {
-  width: 100%;
-  padding: var(--command-space-3xl) var(--command-space-3xl) 0;
-}
-
-.ds-command-bar__search {
-  appearance: none;
-  width: 100%;
-  min-height: var(--command-height-default);
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--command-space-md);
-  margin: 0;
-  background: var(--command-bg-raised);
-  color: var(--command-content-subtle);
-  padding: var(--command-space-3xl) var(--command-space-4xl) var(--command-space-3xl) var(--command-space-3xl);
-  text-align: start;
-}
-
-.ds-command-bar__search--default {
-  cursor: pointer;
-}
-
-.ds-command-bar__search--divider {
-  border-bottom: var(--bh-space-xxxs-1) solid var(--command-border-input);
-}
-
-.ds-command-bar--mobile .ds-command-bar__search {
-  min-height: var(--command-search-mobile-height);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-input);
-  border-radius: var(--command-radius-lg);
-  background: var(--command-input-default);
-  padding: var(--command-space-xl);
-}
-
-.ds-command-bar--desktop.ds-command-bar--rtl .ds-command-bar__search {
-  padding-right: var(--command-space-3xl);
-  padding-left: var(--command-space-4xl);
-}
-
-.ds-command-bar__search-content {
-  display: flex;
-  flex: 1 0 0;
-  align-items: center;
-  gap: var(--command-space-md);
-  min-width: 0;
-}
-
-.ds-command-bar__placeholder,
-.ds-command-bar__search-text {
-  display: block;
-  flex: 1 0 0;
-  min-width: 0;
-  overflow: hidden;
-  line-height: var(--bh-text-body-md-regular-line-height);
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-word;
-}
-
-.ds-command-bar__placeholder {
-  color: var(--command-content-muted);
-}
-
-.ds-command-bar__search-text {
-  color: var(--command-content-default);
-}
-
-.ds-command-bar__shortcut {
-  height: var(--command-shortcut-height);
-  min-width: var(--command-shortcut-min-width);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
-  border-radius: var(--command-radius-md);
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bh-space-xxs-2);
-  background: var(--command-interactive-soft);
-  color: var(--command-content-subtle);
-  font-family: var(--bh-font-family);
-  font-size: var(--bh-text-body-sm-medium-font-size);
-  font-style: normal;
-  font-weight: var(--bh-text-body-sm-medium-font-weight);
-  line-height: 1;
-  padding: 0 var(--command-space-sm);
-}
-
-.ds-command-bar__shortcut-icon {
-  width: var(--command-shortcut-icon-size);
-  height: var(--command-shortcut-icon-size);
-  stroke-width: 1.8;
-}
-
-.ds-command-bar__shortcut-key {
-  display: block;
-  line-height: 1;
-}
-
-.ds-command-bar__close {
-  appearance: none;
-  width: var(--command-close-size);
-  height: var(--command-close-size);
-  border: 0;
-  border-radius: var(--command-radius-full);
-  display: inline-grid;
-  flex: 0 0 auto;
-  place-items: center;
-  background: transparent;
-  color: var(--command-content-subtle);
-  cursor: pointer;
-  padding: 0;
-}
-
-.ds-command-bar__close:focus-visible,
-.ds-command-bar__search:focus-visible,
-.ds-command-bar__item:focus-visible {
-  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
-.ds-command-bar__content {
-  width: 100%;
-  overflow: hidden;
-  padding-block: var(--command-space-3xl);
-}
-
-.ds-command-bar--desktop.ds-command-bar--recent .ds-command-bar__content {
-  height: var(--command-content-height-recent);
-}
-
-.ds-command-bar--desktop.ds-command-bar--results .ds-command-bar__content {
-  height: var(--command-content-height-results);
-}
-
-.ds-command-bar--mobile .ds-command-bar__content {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding-block: var(--command-space-3xl);
-}
-
-.ds-command-bar__main {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-5xl);
-  min-width: 0;
-}
-
-.ds-command-bar__section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-md);
-  width: 100%;
-}
-
-.ds-command-bar__section-heading {
-  display: flex;
-  width: 100%;
-  padding-inline: var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__section-heading {
-  padding-inline: var(--command-space-3xl);
-}
-
-.ds-command-bar__section-heading span {
-  flex: 1 0 0;
-  min-width: 0;
-  color: var(--command-content-subtle);
-  line-height: var(--bh-text-body-md-regular-line-height);
-  text-align: start;
-}
-
-.ds-command-bar__group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-inline: var(--command-space-md);
-}
-
-.ds-command-bar--mobile .ds-command-bar__group {
-  padding-inline: var(--command-space-xs);
-}
-
-.ds-command-bar__item {
-  appearance: none;
-  width: 100%;
-  min-height: var(--command-item-height);
-  border: 0;
-  border-radius: var(--command-radius-lg);
-  display: flex;
-  align-items: center;
-  gap: var(--command-space-xl);
-  margin: 0;
-  background: transparent;
-  color: var(--command-content-default);
-  cursor: pointer;
-  padding: var(--command-space-xl);
-  text-align: start;
-}
-
-.ds-command-bar__item.is-highlighted,
-.ds-command-bar__item:hover {
-  background: var(--command-interactive-hover);
-}
-
-.ds-command-bar__icon-wrap,
-.ds-command-bar__avatar {
-  width: var(--command-icon-size);
-  height: var(--command-icon-size);
-  border-radius: var(--command-radius-md);
-  display: inline-grid;
-  flex: 0 0 auto;
-  place-items: center;
-}
-
-.ds-command-bar__icon-wrap {
-  background: var(--command-bg-neutral-soft);
-  color: var(--command-content-subtle);
-}
-
-.ds-command-bar__avatar {
-  overflow: hidden;
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  border-radius: var(--command-radius-full);
-  background:
-    radial-gradient(circle at 42% 34%, var(--bh-bg-accent-amber-soft) 0 10%, transparent 11%),
-    radial-gradient(circle at 52% 42%, var(--bh-bg-accent-amber-default) 0 20%, transparent 21%),
-    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-brand-strong) 42%, var(--bh-bg-always-dark));
-}
-
-.ds-command-bar__item-copy {
-  display: flex;
-  flex: 1 0 0;
-  flex-direction: column;
-  min-width: 0;
-  text-align: start;
-  word-break: break-word;
-}
-
-.ds-command-bar__item-copy strong {
-  width: 100%;
-  overflow: hidden;
-  color: var(--command-content-default);
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-text-body-md-medium-font-weight);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-command-bar__item-copy span {
-  width: 100%;
-  overflow: hidden;
-  color: var(--command-content-subtle);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-text-body-2xs-regular-font-weight);
-  line-height: var(--bh-text-body-2xs-regular-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ds-command-bar__filter {
-  display: flex;
-  flex-direction: column;
-  gap: var(--command-space-3xl);
-  width: 100%;
-  padding-inline: var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__filter {
-  padding-inline: var(--command-space-3xl);
-}
-
-.ds-command-bar__filter .ds-command-bar__section-heading {
-  padding-inline: 0;
-}
-
-.ds-command-bar__tags {
-  display: flex;
-  gap: var(--command-space-md);
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.ds-command-bar__tag {
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-
-.ds-command-bar__empty {
-  width: 100%;
-  display: grid;
-  flex: 1 1 auto;
-  place-items: center;
-  padding: var(--command-space-10xl) var(--command-space-4xl);
-}
-
-.ds-command-bar--mobile .ds-command-bar__empty {
-  align-items: start;
-  padding-top: var(--command-empty-mobile-padding);
-}
-
-.ds-command-bar__empty-wrap {
-  display: grid;
-  place-items: center;
-  gap: var(--command-space-xs);
-  text-align: center;
-}
-
-.ds-command-bar__empty-icon {
-  width: var(--bh-space-7xl-40);
-  height: var(--bh-space-7xl-40);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  border-radius: var(--command-radius-full);
-  display: grid;
-  place-items: center;
-  background: var(--command-bg-neutral-subtle);
-  color: var(--command-content-default);
-}
-
-.ds-command-bar__empty-wrap strong {
-  color: var(--command-content-default);
-  font-size: var(--bh-text-body-lg-medium-font-size);
-  font-weight: var(--bh-text-body-lg-medium-font-weight);
-  line-height: var(--bh-text-body-lg-medium-line-height);
-}
-
-.ds-command-bar__empty-wrap span:last-child {
-  color: var(--command-content-subtle);
-  font-size: var(--bh-text-body-md-regular-font-size);
-  line-height: var(--bh-text-body-md-regular-line-height);
-}
-
-.ds-command-bar__footer {
-  width: 100%;
-  border-top: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
-  display: flex;
-  align-items: center;
-  background: var(--command-bg-raised);
-  color: var(--command-content-subtle);
-  padding: var(--command-space-xl);
-}
-
-.ds-command-bar__footer-content {
-  display: flex;
-  align-items: center;
-  gap: var(--command-space-3xl);
-}
-
-.ds-command-bar__footer-hint {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--command-space-xs);
-  white-space: nowrap;
-}