@crewlethq/ui 0.28.0 → 0.29.0

package/dist/styles.css

@@ -548,7 +548,7 @@
 }
 
 
-/* AppShell-APHZKJYH.css */
+/* AppShell-GCM4TDVY.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1040,9 +1040,12 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. */
+   scrolling and the content column takes the height that is left. It
+   reserves no scrollbar gutter either, since nothing in it scrolls: the
+   reserved strip was a dead band down the screen's end edge. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
@@ -1993,6 +1996,367 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactBar-IBWB5POL.css */
+/*
+ * One row, one hairline under it, the height of a large row. The lead (the
+ * way back, the glyph, the title, the version) takes what the end leaves it
+ * and the title is what gives way, ellipsised; the views sit between the two,
+ * centred while both sides have room, because the lead and the end each grow
+ * from a zero basis and the end never shrinks below its controls.
+ *
+ * Three widths of its OWN fold it (a container query, since a sidebar or a
+ * panel beside it decides its room, not the window): under a laptop sheet's
+ * width the presence stack goes (the People control still counts who is
+ * here), then the labelled tools' words, and under a phone's two panes the
+ * views, the unlabelled tools and the kind's glyph fold away, the first two
+ * into More.
+ */
+
+.crewlet-artifact-bar {
+  container: crewlet-artifact-bar / inline-size;
+  display: block;
+  min-width: 0;
+  background: var(--color-surface-background);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-bar__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__lead {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__end {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+}
+
+/* WITH VIEWS TO CENTRE, the end grows from zero as the lead does, so the two
+   sides stay equal while there is room and the views sit in the middle; the
+   end never shrinks below its controls, so it is the title that gives way. */
+.crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+  flex: 1 0 0;
+  min-width: max-content;
+}
+
+.crewlet-artifact-bar__modes {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-artifact-bar__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  color: var(--color-text-secondary);
+}
+
+/* THE TITLE. Read only, it is text; renamable, its words are a button drawn
+   as text that answers the pointer with the hover ground, as a field would. */
+.crewlet-artifact-bar__title {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__title--editing {
+  overflow: visible;
+}
+
+.crewlet-artifact-bar__rename {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-artifact-bar__rename:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-artifact-bar__rename:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The field is as wide as what is typed in it: the grid cell is sized by a
+   hidden copy of the text, and the field fills that cell. */
+.crewlet-artifact-bar__sizer {
+  display: inline-grid;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-artifact-bar__sizer::after {
+  content: attr(data-value) ' ';
+  visibility: hidden;
+  grid-area: 1 / 1;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  white-space: pre;
+  font: inherit;
+}
+
+.crewlet-artifact-bar__field {
+  grid-area: 1 / 1;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-2) - 1px);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.crewlet-artifact-bar__field:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-artifact-bar__field[aria-invalid='true'] {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-artifact-bar__error {
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__placeholder {
+  display: block;
+  flex: 0 1 12rem;
+  height: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-artifact-bar__version {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__presence {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tools {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tool {
+  position: relative;
+  display: inline-flex;
+}
+
+/* A figure on the glyph's corner, inside the button's own box so it never
+   reaches past the bar's edge. */
+.crewlet-artifact-bar__badge {
+  position: absolute;
+  top: calc(-1 * var(--spacing-1));
+  right: calc(-1 * var(--spacing-1));
+  min-width: var(--spacing-4);
+  height: var(--spacing-4);
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--spacing-4);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* WHILE THE PRESENCE STACK IS DRAWN it says who is here, so a tool's figure
+   saying the same is not drawn beside it; it comes back where the stack
+   folds away. */
+.crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+  display: none;
+}
+
+/* A rule between two groups of tools: the kind's, then every artifact's. */
+.crewlet-artifact-bar__rule {
+  width: 1px;
+  height: var(--spacing-4);
+  margin: 0 var(--spacing-1);
+  background: var(--color-border-default);
+}
+
+.crewlet-artifact-bar__tip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Both arrangements are drawn; the bar's width says which one shows. */
+.crewlet-artifact-bar__narrow,
+.crewlet-artifact-bar__tight {
+  display: none;
+}
+
+.crewlet-artifact-bar__wide,
+.crewlet-artifact-bar__roomy {
+  display: inline-flex;
+}
+
+@container crewlet-artifact-bar (width < 860px) {
+  .crewlet-artifact-bar__presence {
+    display: none;
+  }
+
+  .crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+    display: block;
+  }
+}
+
+@container crewlet-artifact-bar (width < 720px) {
+  .crewlet-artifact-bar__roomy {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__tight {
+    display: inline-flex;
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-artifact-bar__row {
+    gap: var(--spacing-1);
+    padding: 0 var(--spacing-2);
+  }
+
+  /* The title has the row's room before the kind's glyph does: the glyph
+     says again what the title already names. */
+  .crewlet-artifact-bar__wide,
+  .crewlet-artifact-bar__glyph {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__narrow {
+    display: inline-flex;
+  }
+
+  /* The views have folded, so there is nothing to centre: the title takes
+     the room. */
+  .crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+    flex: none;
+    min-width: 0;
+  }
+}
+
+/*
+ * THE VERSION CHIP: quiet at rest, the hover ground under the pointer, and
+ * the accent's soft ground while an older version than the newest is on
+ * show, so history never passes for the present.
+ */
+.crewlet-version-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--size-target-min);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-version-chip:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-version-chip--older {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-version-chip--older:hover {
+  background: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-bar__rename,
+  .crewlet-version-chip {
+    transition: none;
+  }
+}
+
+
 /* ArtifactCard-EXVAEBV6.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
@@ -2175,6 +2539,141 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactPanel-YFXT5O77.css */
+/*
+ * The workspace is a row: the artifact's body, then at most one panel. The
+ * body scrolls itself, so a panel beside it stays in view however far the
+ * artifact is read; the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * workspace's own edges: whatever frames the workspace already draws those.
+ */
+
+.crewlet-artifact-workspace {
+  container: crewlet-artifact-workspace / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-artifact-workspace__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
+.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
+  display: none;
+}
+
+.crewlet-artifact-panel {
+  --crewlet-artifact-panel-width: 25rem;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-artifact-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+.crewlet-artifact-panel--sm {
+  --crewlet-artifact-panel-width: 20rem;
+}
+
+.crewlet-artifact-panel--lg {
+  --crewlet-artifact-panel-width: 36rem;
+}
+
+.crewlet-artifact-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+.crewlet-artifact-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-panel__title:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-artifact-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-panel__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
+   raised off it, rather than squeezing the artifact under a useful width. */
+@container crewlet-artifact-workspace (width < 960px) {
+  .crewlet-artifact-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-artifact-panel-width), 100%);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .crewlet-artifact-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the screen until it is closed. */
+@container crewlet-artifact-workspace (width < 640px) {
+  .crewlet-artifact-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -16604,7 +17103,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PeopleRail-R64WVOSH.css */
+/* PeopleRail-SZGHZXVT.css */
 /* PeopleRail: a raised column of everybody present, one row a person, the
    name over what they are doing and the controls at the row's end. */
 .crewlet-people-rail {
@@ -16618,6 +17117,14 @@ svg.crewlet-datetime__chevron {
   background: var(--color-surface-elevated);
 }
 
+/* PLAIN: the list alone, in a host that frames and names it. */
+.crewlet-people-rail--plain {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .crewlet-people-rail__head {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.28.0",
-    "@crewlethq/tokens": "0.28.0",
+    "@crewlethq/icons": "0.29.0",
+    "@crewlethq/tokens": "0.29.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/chunk-FVLCTCMV.js

@@ -1,96 +0,0 @@
-import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
-import { Avatar } from './chunk-5OM447RW.js';
-import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './PeopleRail-R64WVOSH.css';
-import { useId } from 'react';
-import { isCrewletCharacter } from '@crewlethq/icons/characters';
-import { XGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var PEOPLE_RAIL_LABELS = {
-  title: "People here",
-  close: "Close people",
-  you: "You",
-  nobody: "Nobody else is here right now.",
-  follow: "Follow",
-  following: "Following",
-  followName: (name) => `Follow ${name}`,
-  stopFollowingName: (name) => `Stop following ${name}`,
-  activity: PRESENCE_LABELS.activity
-};
-function peopleRailKey(member) {
-  return member.seat ?? member.id;
-}
-function PeopleRail({
-  members,
-  self,
-  following,
-  onFollow,
-  onClose,
-  actions,
-  labels: overrides,
-  className
-}) {
-  const labels = overrides ? { ...PEOPLE_RAIL_LABELS, ...overrides } : PEOPLE_RAIL_LABELS;
-  const headingID = useId();
-  const Heading = headingTag(useHeadingLevel());
-  const others = presenceOrder(collapseSessions(members));
-  return /* @__PURE__ */ jsxs("aside", { className: cx("crewlet-people-rail", className), "aria-labelledby": headingID, children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-people-rail__head", children: [
-      /* @__PURE__ */ jsx(Heading, { className: "crewlet-people-rail__title", id: headingID, children: labels.title }),
-      onClose && /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: labels.close, icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), onClick: onClose })
-    ] }),
-    /* @__PURE__ */ jsxs("ul", { role: "list", className: "crewlet-people-rail__list", children: [
-      self && /* @__PURE__ */ jsxs("li", { className: "crewlet-people-rail__person", children: [
-        /* @__PURE__ */ jsx(PresenceBadge, { member: self }),
-        /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__text", children: /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__name", children: labels.you }) })
-      ] }),
-      others.map((member) => {
-        const key = peopleRailKey(member);
-        const followed = following !== void 0 && following === key;
-        const extra = actions?.(member);
-        return /* @__PURE__ */ jsxs("li", { className: "crewlet-people-rail__person", children: [
-          /* @__PURE__ */ jsx(PresenceBadge, { member }),
-          /* @__PURE__ */ jsxs("span", { className: "crewlet-people-rail__text", children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__name", children: member.name }),
-            /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__where", children: member.location ?? labels.activity(member.activity, member.kind) })
-          ] }),
-          extra !== void 0 && extra !== null || onFollow ? /* @__PURE__ */ jsxs("span", { className: "crewlet-people-rail__actions", children: [
-            extra,
-            onFollow && /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                variant: followed ? "primary" : "secondary",
-                pressed: followed,
-                "aria-label": followed ? labels.stopFollowingName(member.name) : labels.followName(member.name),
-                onClick: () => onFollow(followed ? null : member),
-                children: followed ? labels.following : labels.follow
-              }
-            )
-          ] }) : null
-        ] }, key);
-      })
-    ] }),
-    others.length === 0 && /* @__PURE__ */ jsx("p", { className: "crewlet-people-rail__note", children: labels.nobody })
-  ] });
-}
-function PresenceBadge({ member }) {
-  return /* @__PURE__ */ jsx(
-    Avatar,
-    {
-      name: member.name,
-      kind: member.kind,
-      src: member.src,
-      character: member.character !== void 0 && isCrewletCharacter(member.character) ? member.character : void 0,
-      hue: member.kind === "agent" ? member.hue : void 0,
-      size: "sm",
-      decorative: true
-    }
-  );
-}
-
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey };

package/dist/{chunk-RIEDQSA4.js → chunk-7DZDSSJS.js}

@@ -1,5 +1,5 @@
-import { Kbd } from './chunk-SMBKXWML.js';
 import { Textarea } from './chunk-6QFAK2WV.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-ABGJIAIR.css';
 import { forwardRef } from 'react';

package/dist/{chunk-YZCJ63JF.js → chunk-ACA27MZH.js}

@@ -1,6 +1,6 @@
 import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
-import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Card-KJOYHDTJ.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';

package/dist/{chunk-ENJUPIND.js → chunk-FZVJDJFN.js}

@@ -1,5 +1,5 @@
-import { headingTag } from './chunk-PQADV6P6.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-SGIQCI6Y.js → chunk-LIXSV5YI.js}

@@ -1,5 +1,5 @@
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { SegmentedControl } from './chunk-RCQXUT5K.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';