@crewlethq/ui 0.4.3 → 0.5.0

package/dist/SidebarNav-QGSFKZYA.css

@@ -1,319 +0,0 @@
-/*
- * The rail's navigation.
- *
- * ONE VERTICAL LINE. The rail pads by --size-nav-gutter and each row pads by
- * --size-nav-row-pad, so the mark, the group labels and every row's text start
- * on the same line: shrink the gutter and grow the pad by the same step and
- * nothing moves. That is why the row's own background takes the full width the
- * gutter leaves it, rather than each row carrying a horizontal margin of its
- * own.
- */
-
-.crewlet-sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
-  padding: var(--spacing-2) var(--size-nav-gutter) var(--spacing-4);
-}
-
-/*
- * THE ROWS INSIDE A GROUP ARE FLUSH. A group is a run of destinations read as
- * one block, and the space between two of them is already the row's own height
- * against a 13px line; a step on top of that spends four pixels a rail cannot
- * afford fifteen times over. It is what the group LABEL's bottom pad is for,
- * and the rail's own gap between groups is what separates one run from the
- * next.
- *
- * Measured rather than chosen: at one step per row the rail stood 823px in a
- * 755px scroller, so the last two destinations in the product were reachable
- * only by scrolling the rail. Flush it is 746px and every row is on screen.
- */
-.crewlet-nav-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-0);
-  min-width: 0;
-}
-
-.crewlet-nav-group__label {
-  padding: var(--spacing-3) var(--size-nav-row-pad) var(--spacing-1);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  /* The rail's own micro-label register, which is one step tighter than the
-     wider step an Eyebrow takes: a group name here sits four pixels above the
-     row it names, and at the wider step "OPERATIONS" was visibly broader than
-     the rows beneath it rather than quieter than them. */
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-  /* The 4.5:1 step: a group name is a fact a reader has to read, not
-     decoration. */
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-nav-item {
-  min-width: 0;
-}
-
-.crewlet-nav-item__head {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-.crewlet-nav-item__row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  min-height: var(--size-row-md);
-  padding: 0 var(--size-nav-row-pad);
-  border: none;
-  /* The chrome's radius, not a card's. A 12px corner on a 36px row leaves the
-     tint reading as a lozenge floating in the gutter rather than as a band the
-     width of the rail. */
-  border-radius: var(--radius-md);
-  background: transparent;
-  /*
-   * THE RAIL READS AT FULL INK. A destination is not secondary text: a rail of
-   * fifteen rows in the quiet step is a column of grey a reader has to hunt
-   * through, and the step down bought nothing the row's own tint does not
-   * already say. It is also the darker of the two on light and the lighter on
-   * dark, so the contrast on every ground the row can have goes up rather than
-   * down.
-   *
-   * WHAT CARRIES HOVER IS THEREFORE THE TINT, not an ink step: there is no
-   * step left above this one. The glyph is the second half of it, lifting from
-   * the decoration ramp to the row's own ink.
-   */
-  color: var(--color-text-primary);
-  font-family: var(--font-family-sans);
-  /* THE CHROME IS NOT BODY TEXT. A rail row names a destination; it is read at
-     a glance and never read through, so it takes the compact step in the
-     medium weight, which is what keeps a one-word row legible at 13px. */
-  font-size: var(--font-size-compact);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-snug);
-  line-height: var(--font-line-height-tight);
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background var(--motion-duration-fast) var(--motion-easing-default),
-    color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__row:hover {
-  background: var(--color-surface-hover);
-  text-decoration: none;
-}
-
-.crewlet-nav-item__row:focus-visible {
-  outline: 2px solid var(--color-focus);
-  /* Inside the row's own box: the rail is a clipping scroller, so an outset
-     ring on the first or last row is cut off by it. */
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-/*
- * WHERE THE READER IS: the accent's own soft tint, with the label and the
- * glyph in the accent ink. That is the whole job of an accent in a chrome, and
- * the rail is the one place in the chrome it appears.
- *
- * It was a neutral lift with the accent as a one-pixel bar outside the row's
- * left edge, on the reading that accent text in a rail competes with the
- * status hues beside it and cannot be separated from the row above by a reader
- * with a colour vision deficiency. Neither holds here. Nothing in this rail
- * carries a status hue except the attention count below, which is a tint
- * BEHIND a word rather than a word in a hue; and the tint is what answers the
- * second objection, because the row still lifts off its ground by more than a
- * hovered one does whether or not the hue is seen at all (@crewlethq/tokens
- * measures exactly that, and measures this ink on this composite: 5.76:1 in
- * light, 5.96:1 in dark).
- *
- * What the bar cost was that one pixel of hue was the entire signal, at the
- * one moment a reader is scanning the rail to find out where they are.
- *
- * Drawn from aria-current, so the picture and what a screen reader is told
- * cannot come apart. It is declared after :hover deliberately: both selectors
- * weigh the same, a row shows the current tint or the hover overlay and never
- * both, and later is what decides which.
- */
-.crewlet-nav-item__row[aria-current='page'] {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
-}
-
-.crewlet-nav-item__row[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.crewlet-nav-item__row[aria-disabled='true']:hover {
-  background: transparent;
-  color: var(--color-text-primary);
-}
-
-/*
- * THE GLYPH FOLLOWS THE LABEL. At rest it is quieter than the word beside it
- * and takes the decoration step; on a hovered row and on the reader's own it
- * takes the row's own colour, which on the current row is the accent ink.
- *
- * ONE inherit rather than a second ramp, because a second ramp is how a row
- * comes to paint its label and its glyph two different answers to "where am
- * I". The colour is set on the DRAWING rather than on the box around it, which
- * is what says the decoration step is being spent on a glyph and not on text:
- * the package's variable check holds that rule, and it is the rule the step
- * exists for.
- */
-.crewlet-nav-item__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-.crewlet-nav-item__icon svg {
-  color: var(--color-text-muted);
-  transition: color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__row:hover .crewlet-nav-item__icon svg,
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__icon svg {
-  color: inherit;
-}
-
-.crewlet-nav-item__label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-nav-item__badge {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  margin-left: auto;
-  font-size: var(--font-size-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-tertiary);
-}
-
-/*
- * THE SLOT IS WHAT PAINTS. A caller hands in the figure and the name a screen
- * reader reads after the row's own ("3 things waiting on somebody"); the rail
- * decides whether that is a quiet number at the end of the row or the one
- * thing on the screen that should pull the eye. So whatever arrives
- * contributes its text and its accessible name and nothing else, which is why
- * a <Count> here draws its own text rather than a second pill inside this one.
- */
-.crewlet-nav-item__badge > * {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  min-width: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  /* Not the `font` shorthand, which would reset font-variant and take the
-     tabular figures with it. */
-  font-variant-numeric: inherit;
-  line-height: inherit;
-}
-
-/* A quiet badge takes the row's ink, the current row's accent included. The
-   attention badge keeps its own, which is the whole point of it, and the
-   :not() is what says so: both selectors would otherwise weigh the same and a
-   tone would be decided by which rule a later edit happened to move. */
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge:not(.crewlet-nav-item__badge--attention) {
-  color: inherit;
-}
-
-/*
- * THE ONE BADGE IN THE CHROME ALLOWED A STATUS HUE. A count of what is waiting
- * on a person is the one thing that should pull the eye out of whatever screen
- * the reader is on, and it stays a tint BEHIND a word rather than a word in a
- * hue, so it reads to somebody who cannot separate the hue at all.
- *
- * Measured on every ground a row can have, the reader's own row included,
- * which is a warning tint on the accent tint on the rail: @crewlethq/tokens'
- * palette suite has that composite by name, at 5.08:1 in light and 9.75:1 in
- * dark.
- */
-.crewlet-nav-item__badge--attention {
-  padding: 0 var(--spacing-2);
-  border-radius: var(--radius-pill);
-  background: var(--color-feedback-warning-soft);
-  color: var(--color-feedback-warning-ink);
-  font-weight: var(--font-weight-semibold);
-}
-
-.crewlet-nav-item__toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--size-control-sm);
-  height: var(--size-control-sm);
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-}
-
-.crewlet-nav-item__toggle:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-.crewlet-nav-item__toggle:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-.crewlet-nav-item__chevron {
-  display: inline-flex;
-  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__chevron--open {
-  transform: rotate(180deg);
-}
-
-/*
- * Nested rows carry an indent guide rather than more padding, because a run of
- * indents with no line is a hierarchy a reader has to measure by eye. The
- * guide takes the accent on the path the reader is on, which is the same
- * signal the top-level rail gives.
- */
-.crewlet-nav-item__children {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  margin-left: var(--size-nav-row-pad);
-  padding-left: var(--spacing-2);
-  border-left: 1px solid var(--color-border-default);
-}
-
-/* No type step of its own any more: every row in the rail reads at the compact
-   step now, and the indent guide is what says a row is nested. */
-.crewlet-nav-item__children:has(.crewlet-nav-item__row[aria-current='page']) {
-  border-left-color: var(--color-brand-accent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-nav-item__row,
-  .crewlet-nav-item__icon svg,
-  .crewlet-nav-item__chevron {
-    transition: none;
-  }
-}

package/dist/StatCard-KYPKZUWX.css

@@ -1,111 +0,0 @@
-/*
- * The stat tile.
- *
- * THE TONE PAINTS THE VALUE, which is what the props always said and what the
- * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
- * and no icon got a tile identical to a neutral one. Ink only, and never a
- * fill: a tinted block behind a 24px number reads as a button.
- */
-
-.crewlet-statcard {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-3) var(--spacing-4);
-  /* The panel recipe: the surface, the hairline, the 12px corner and the
-     elevation the engine gives every card on a screen, so a lone tile is the
-     same object as the panel beside it rather than a flatter cousin. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
-  color: var(--color-text-primary);
-  font-family: var(--font-family-sans);
-  min-width: 0;
-}
-
-/* Inside a StatGroup the row is one card and the tiles are its columns, so a
-   tile brings no surface of its own. */
-.crewlet-statcard--flush {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-  box-shadow: none;
-}
-
-.crewlet-statcard__value {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-2);
-  min-width: 0;
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-tight);
-  /* 1.1, the engine's, which is tighter than the tight step: a 24px number
-     with 1.2 of leading sits low in its box and opens a gap between the value
-     and the line under it that the 4px gap was already spending. */
-  line-height: 1.1;
-  /* A number that ticks up must not move the label under it. */
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-statcard__unit {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  letter-spacing: var(--font-letter-spacing-normal);
-  color: var(--color-text-tertiary);
-}
-
-/*
- * The placeholder is a line, not a pair of dashes. `--` is read aloud as
- * "dash dash" and looks exactly like a measured value of nothing; the tile
- * carries aria-busy instead, and the line says the number is on its way.
- */
-.crewlet-statcard__placeholder {
-  display: inline-block;
-  width: 3ch;
-  height: 0.7em;
-  border-radius: var(--radius-xs);
-  background: var(--color-surface-inset);
-}
-
-.crewlet-statcard__label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
-  min-width: 0;
-}
-
-.crewlet-statcard__icon {
-  display: inline-flex;
-  flex: none;
-}
-
-/*
- * The second line keeps its space whether or not there is one, so a row of
- * tiles where only some carry a sub still sits on one baseline.
- */
-.crewlet-statcard__sub {
-  min-height: 1.2em;
-  font-size: var(--font-size-xs);
-  /* The quiet step, with the label. The sub qualifies the number rather than
-     being a second one, and the engine keeps both of them a step under the
-     value they belong to. */
-  color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
-.crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
-.crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
-.crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }

package/dist/StatusDot-HA2L2FSX.css

@@ -1,84 +0,0 @@
-/*
- * The status dot: a 6px mark in its tone's fill, beside the word it belongs
- * to. See the component doc for why it is hidden from assistive technology.
- */
-
-.crewlet-status-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: var(--radius-circle);
-  /*
-   * The quiet state is still a mark, so it takes the tertiary step rather than
-   * the decoration one the engine spends here: a 6px dot has to clear 3:1 to
-   * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
-   * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
-   * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
-   */
-  background: var(--color-text-tertiary);
-  flex: none;
-}
-
-.crewlet-status-dot--info {
-  background: var(--color-feedback-info);
-}
-
-.crewlet-status-dot--success {
-  background: var(--color-feedback-success);
-}
-
-.crewlet-status-dot--warning {
-  background: var(--color-feedback-warning);
-}
-
-.crewlet-status-dot--danger {
-  background: var(--color-feedback-danger);
-}
-
-.crewlet-status-dot--brand {
-  background: var(--color-brand-accent);
-}
-
-.crewlet-status-dot--phase-onboarding {
-  background: var(--color-phase-onboarding);
-}
-
-.crewlet-status-dot--phase-execute {
-  background: var(--color-phase-execute);
-}
-
-.crewlet-status-dot--phase-review {
-  background: var(--color-phase-review);
-}
-
-/*
- * Still happening. Three things are deliberate: the pulse never goes to
- * nothing, because a mark that disappears reads as a fault rather than as work
- * in progress; it alternates rather than sawtooths, so the mark comes back the
- * way it went; and the round trip is 1.8s, which is the engine's own breath
- * and is 0.55 flashes a second, well clear of the three that are a seizure
- * risk. Three of the slow step each way makes that round trip.
- */
-.crewlet-status-dot.is-pulsing {
-  animation: crewlet-status-dot-pulse calc(var(--motion-duration-slow) * 3) var(--motion-easing-default) infinite
-    alternate;
-}
-
-@keyframes crewlet-status-dot-pulse {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.35;
-  }
-}
-
-/*
- * A mark that cannot move should not pretend to. The dot still reads as its
- * tone, and the word beside it still says what is happening.
- */
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-status-dot.is-pulsing {
-    animation: none;
-  }
-}

package/dist/chunk-22O7LAW2.js

@@ -1,41 +0,0 @@
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './StatCard-KYPKZUWX.css';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var StatCard = ({
-  label,
-  value,
-  unit,
-  sub,
-  icon,
-  tone = "neutral",
-  loading = false,
-  loadingLabel = "Loading",
-  flush = false,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    ...rest,
-    className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
-    "aria-busy": loading || void 0,
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
-        label
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        value,
-        unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__sub", children: sub })
-    ]
-  }
-);
-
-export { StatCard };

package/dist/chunk-2HQR4U4D.js

@@ -1,143 +0,0 @@
-import { SegmentedControl } from './chunk-6ZFVFA56.js';
-import { LightModeGlyph, ComputerGlyph, DarkModeGlyph } from '@crewlethq/icons/glyphs';
-import { useState, useEffect, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var THEMES = ["system", "light", "dark"];
-var DENSITIES = ["normal", "compact", "comfortable"];
-function read(key, allowed, fallback) {
-  try {
-    const held = globalThis.localStorage?.getItem(key);
-    return allowed.includes(held) ? held : fallback;
-  } catch {
-    return fallback;
-  }
-}
-function write(key, value) {
-  try {
-    globalThis.localStorage?.setItem(key, value);
-  } catch {
-  }
-}
-function root() {
-  return typeof document === "undefined" ? null : document.documentElement;
-}
-function applyTheme(theme) {
-  const el = root();
-  if (!el) return;
-  if (theme === "system") el.removeAttribute("data-theme");
-  else el.setAttribute("data-theme", theme);
-}
-function applyDensity(density) {
-  const el = root();
-  if (!el) return;
-  if (density === "normal") el.removeAttribute("data-density");
-  else el.setAttribute("data-density", density);
-}
-function useThemePreference({
-  storageKey
-}) {
-  const [theme, setTheme] = useState(() => read(storageKey, THEMES, "system"));
-  useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  const choose = useCallback(
-    (next) => {
-      setTheme(next);
-      applyTheme(next);
-      write(storageKey, next);
-    },
-    [storageKey]
-  );
-  return [theme, choose];
-}
-function useDensityPreference({
-  storageKey
-}) {
-  const [density, setDensity] = useState(
-    () => read(storageKey, DENSITIES, "normal")
-  );
-  useEffect(() => {
-    applyDensity(density);
-  }, [density]);
-  const choose = useCallback(
-    (next) => {
-      setDensity(next);
-      applyDensity(next);
-      write(storageKey, next);
-    },
-    [storageKey]
-  );
-  return [density, choose];
-}
-function applyStoredPreferences({ themeKey, densityKey }) {
-  const theme = themeKey ? read(themeKey, THEMES, "system") : "system";
-  const density = densityKey ? read(densityKey, DENSITIES, "normal") : "normal";
-  applyTheme(theme);
-  applyDensity(density);
-  return { theme, density };
-}
-function ThemeSwitcher({
-  storageKey = "crewlet_theme",
-  label = "Theme",
-  lightLabel = "Light",
-  systemLabel = "Follow the system",
-  darkLabel = "Dark",
-  size = "sm",
-  className
-}) {
-  const [theme, choose] = useThemePreference({ storageKey });
-  return /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      label,
-      semantics: "radio",
-      size,
-      className,
-      value: theme,
-      onValueChange: choose,
-      options: [
-        { value: "light", icon: /* @__PURE__ */ jsx(LightModeGlyph, {}), srLabel: lightLabel, title: lightLabel },
-        { value: "system", icon: /* @__PURE__ */ jsx(ComputerGlyph, {}), srLabel: systemLabel, title: systemLabel },
-        { value: "dark", icon: /* @__PURE__ */ jsx(DarkModeGlyph, {}), srLabel: darkLabel, title: darkLabel }
-      ]
-    }
-  );
-}
-function DensitySwitcher({
-  storageKey = "crewlet_density",
-  label = "Density",
-  compactLabel = "Compact",
-  normalLabel = "Normal",
-  comfortableLabel = "Comfortable",
-  compactMark = "S",
-  normalMark = "M",
-  comfortableMark = "L",
-  size = "sm",
-  className
-}) {
-  const [density, choose] = useDensityPreference({ storageKey });
-  return /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      label,
-      semantics: "radio",
-      size,
-      className,
-      value: density,
-      onValueChange: choose,
-      options: [
-        { value: "compact", label: compactMark, srLabel: compactLabel, title: compactLabel },
-        { value: "normal", label: normalMark, srLabel: normalLabel, title: normalLabel },
-        {
-          value: "comfortable",
-          label: comfortableMark,
-          srLabel: comfortableLabel,
-          title: comfortableLabel
-        }
-      ]
-    }
-  );
-}
-
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference };