@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Navigation/Navigation.types.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import type {
+  AccordionProps as ReferenceAccordionProps,
+  BreadcrumbsProps as ReferenceBreadcrumbsProps,
+  IconName,
+  PaginationProps as ReferencePaginationProps,
+  SegmentedControlProps as ReferenceSegmentedControlProps,
+  SidebarProps as ReferenceSidebarProps,
+  TabBarProps as ReferenceTabBarProps,
+  TabsProps as ReferenceTabsProps,
+  TopNavProps as ReferenceTopNavProps,
+} from "../types/reference";
+
+export type TabsProps = ReferenceTabsProps & {
+  /** Panel content per tab value; each renders as a tabpanel labeled by its tab. */
+  panels?: Record<string, ReactNode>;
+};
+
+export type SegmentedControlProps = ReferenceSegmentedControlProps;
+
+export type AccordionProps = ReferenceAccordionProps & {
+  /**
+   * Keeps closed sections in the DOM, hidden, instead of unmounting them. Use it for the More fields
+   * pattern inside a form, so collapsed fields keep their values and still submit with the form.
+   */
+  keepMounted?: boolean;
+  /**
+   * The heading level of each section header, 3 by default. Pick the level that follows the heading
+   * above the accordion, so headings never skip a level (WCAG 1.3.1, axe heading-order).
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+
+export type BreadcrumbsProps = ReferenceBreadcrumbsProps;
+
+export type PaginationProps = ReferencePaginationProps;
+
+export interface NavItem {
+  label: string;
+  icon?: IconName;
+  badge?: number;
+  href?: string;
+  onSelect?: () => void;
+  /** Items listed under this one in the Sidebar, indented one step (the recent projects under Projects). */
+  items?: NavItem[];
+  /** Names the list of `items` for screen readers. */
+  itemsLabel?: string;
+}
+
+export type SidebarProps = Omit<ReferenceSidebarProps, "groups"> & {
+  groups: { label?: string; collapsed?: boolean; items: NavItem[] }[];
+};
+
+export type TopNavProps = Omit<ReferenceTopNavProps, "items"> & {
+  items: (NavItem & { icon: IconName })[];
+  onSearch?: () => void;
+  onHelp?: () => void;
+  onAccount?: () => void;
+};
+
+export type TabBarProps = Omit<ReferenceTabBarProps, "items"> & {
+  items: (NavItem & { icon: IconName })[];
+};

package/src/Navigation/Pagination.tsx

@@ -0,0 +1,30 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { type PaginationProps } from "./Navigation.types.ts";
+
+/** Cursor paging: a summary and Previous and Next, never page numbers it cannot jump to. */
+export function Pagination({
+  summary,
+  hasPrev,
+  hasNext,
+  onPrev,
+  onNext,
+}: PaginationProps): ReactElement {
+  const t = useT();
+  return (
+    <nav aria-label={t("nav.pagination")} className="flex flex-wrap items-center justify-end gap-8">
+      <span className="text-text-secondary tabular-nums" aria-live="polite">
+        {summary}
+      </span>
+      <Button size="sm" icon="ChevronLeft" disabled={!hasPrev} onClick={onPrev}>
+        {t("nav.previous")}
+      </Button>
+      <Button size="sm" disabled={!hasNext} onClick={onNext}>
+        {t("nav.next")}
+        <Icon name="ChevronRight" size={14} />
+      </Button>
+    </nav>
+  );
+}

package/src/Navigation/SegmentedControl.tsx

@@ -0,0 +1,87 @@
+import { useRef, type KeyboardEvent, type ReactElement } from "react";
+import { Direction } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { rovingIndex, useControllable } from "../lib/hooks.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type SegmentedControlProps } from "./Navigation.types.ts";
+
+/**
+ * Two to five peer options, such as the view switcher. Arrow keys, Home and End move focus; Enter,
+ * Space or a click turns a segment on; one segment is always on. It keeps the markup Radix's
+ * single toggle group rendered (a radiogroup of radio buttons with `data-state`) without the
+ * toggle group, roving focus and collection code, about 4 KB gzip on every page with a view
+ * switcher (gate 10).
+ */
+export function SegmentedControl({
+  label,
+  value,
+  options,
+  onChange,
+}: SegmentedControlProps): ReactElement {
+  const dir = Direction.useDirection();
+  const [current, setCurrent] = useControllable<string>(
+    undefined,
+    value ?? options[0]?.value ?? "",
+    onChange,
+  );
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  // The tab stop is the segment that is on, or the first one when none matches.
+  const stop = Math.max(
+    0,
+    options.findIndex((o) => o.value === current),
+  );
+  const move = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const key =
+      event.key === "ArrowDown"
+        ? dir === "rtl"
+          ? "ArrowLeft"
+          : "ArrowRight"
+        : event.key === "ArrowUp"
+          ? dir === "rtl"
+            ? "ArrowRight"
+            : "ArrowLeft"
+          : event.key;
+    const next = rovingIndex(key, index, options.length, "horizontal", dir);
+    if (next === null) return;
+    event.preventDefault();
+    refs.current[next]?.focus();
+  };
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      dir={dir}
+      className="inline-flex self-start max-w-full gap-2 p-2 rounded-control border border-border-control bg-bg-surface"
+    >
+      {options.map((o, i) => {
+        const on = o.value === current;
+        return (
+          <button
+            key={o.value}
+            ref={(el) => {
+              refs.current[i] = el;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            data-state={on ? "on" : "off"}
+            tabIndex={i === stop ? 0 : -1}
+            onClick={() => {
+              if (!on) setCurrent(o.value);
+            }}
+            onKeyDown={(event) => move(event, i)}
+            className={cx(
+              "inline-flex items-center gap-4 h-control-sm px-8 rounded-chip border-0 bg-transparent cursor-pointer",
+              "font-medium text-text-12 text-text-secondary",
+              "data-[state=on]:bg-bg-hover data-[state=on]:text-text-primary data-[state=on]:ring-(length:--stroke-width-hairline) data-[state=on]:ring-border-strong",
+              "pointer-coarse:min-h-target-coarse pointer-coarse:min-w-target-coarse",
+            )}
+          >
+            {o.icon ? <Icon name={o.icon} size={14} /> : null}
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/Navigation/Sidebar.tsx

@@ -0,0 +1,106 @@
+import { useId, useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { type NavItem, type SidebarProps } from "./Navigation.types.ts";
+import { sidebarClass, sidebarItemClass } from "./sidebar-classes.ts";
+
+function NavLink({
+  item,
+  active,
+  className,
+}: {
+  item: NavItem;
+  active: boolean;
+  className: string;
+}) {
+  const body = (
+    <>
+      {item.icon ? <Icon name={item.icon} /> : null}
+      <span className="flex-1 min-w-0 truncate" title={item.label}>
+        {item.label}
+      </span>
+      {item.badge !== undefined ? (
+        <span className="text-text-11 text-text-secondary tabular-nums">{item.badge}</span>
+      ) : null}
+    </>
+  );
+  const current = active ? ("page" as const) : undefined;
+  return item.href ? (
+    <a href={item.href} aria-current={current} className={className} onClick={item.onSelect}>
+      {body}
+    </a>
+  ) : (
+    <button type="button" aria-current={current} className={className} onClick={item.onSelect}>
+      {body}
+    </button>
+  );
+}
+
+/**
+ * The sitemap navigation. Group headings collapse and expand; the active item is the current page. An item may list
+ * items under it (the recent projects under Projects), indented one step. A label longer than the sidebar (a project
+ * name, a longer translation) shrinks with an ellipsis and keeps its whole text as a title (Section 15, gate 16).
+ */
+export function Sidebar({ label, active, groups }: SidebarProps): ReactElement {
+  const t = useT();
+  const base = useId().replace(/:/g, "");
+  const [collapsed, setCollapsed] = useState(() => groups.map((g) => g.collapsed ?? false));
+  return (
+    <nav aria-label={label ?? t("nav.main")} className={sidebarClass}>
+      {groups.map((g, gi) => {
+        const isCollapsed = collapsed[gi] ?? false;
+        const listId = `${base}-group-${gi}`;
+        return (
+          <div key={`${g.label ?? "group"}-${gi}`} className={g.label ? "mt-12" : undefined}>
+            {g.label ? (
+              <h2 className="m-0 mb-2">
+                <button
+                  type="button"
+                  aria-expanded={!isCollapsed}
+                  aria-controls={listId}
+                  onClick={() => setCollapsed((c) => c.map((v, i) => (i === gi ? !v : v)))}
+                  className={cx(
+                    "flex items-center gap-4 w-full px-8 py-2 bg-transparent border-0 cursor-pointer",
+                    "text-text-11 font-medium text-text-secondary hover:text-text-primary pointer-coarse:min-h-target-coarse",
+                  )}
+                >
+                  <Icon name={isCollapsed ? "chevron-right" : "chevron-down"} size={12} />
+                  {g.label}
+                </button>
+              </h2>
+            ) : null}
+            <ul id={listId} hidden={isCollapsed} className="m-0 p-0 list-none">
+              {g.items.map((item) => (
+                <li key={item.label}>
+                  <NavLink
+                    item={item}
+                    active={item.label === active}
+                    className={sidebarItemClass}
+                  />
+                  {item.items && item.items.length > 0 ? (
+                    <ul
+                      aria-label={item.itemsLabel}
+                      data-sidebar-subitems=""
+                      className="m-0 ps-16 py-0 pe-0 list-none"
+                    >
+                      {item.items.map((child) => (
+                        <li key={`${child.label}-${child.href ?? ""}`}>
+                          <NavLink
+                            item={child}
+                            active={child.label === active}
+                            className={sidebarItemClass}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

package/src/Navigation/TabBar.tsx

@@ -0,0 +1,61 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Badge } from "../Chips/Chips.tsx";
+import { ItemAction } from "./Navigation.shared.tsx";
+import { type TabBarProps } from "./Navigation.types.ts";
+
+/** The five-destination bottom bar for phones; targets meet touch-min (48 pt). */
+export function TabBar({
+  label,
+  items,
+  active,
+  compass = false,
+  centerLabel,
+}: TabBarProps): ReactElement {
+  const t = useT();
+  return (
+    <nav
+      aria-label={label}
+      className={cx(
+        "flex justify-around items-stretch w-(--ui-tabbar) max-w-full pt-6 pb-20 box-border bg-bg-surface border-t border-border-subtle",
+        compass && "xos-compass",
+      )}
+    >
+      {items.map((item) => {
+        const center = item.label === centerLabel;
+        return (
+          <ItemAction
+            key={item.label}
+            item={item}
+            active={item.label === active}
+            className={cx(
+              "flex flex-1 flex-col items-center justify-center gap-2 min-h-touch-min rounded-control no-underline",
+              "text-text-11 font-medium text-text-secondary aria-[current=page]:text-accent-text",
+            )}
+          >
+            <span
+              className={cx(
+                "relative inline-flex",
+                center &&
+                  "p-8 -mt-20 rounded-full bg-accent text-accent-text-on ring-(length:--space-4) ring-bg-surface",
+              )}
+            >
+              <Icon name={item.icon} size={compass ? 24 : 20} />
+              {item.badge ? (
+                <Badge
+                  count={item.badge}
+                  tone="danger"
+                  label={t("tabbar.badge", { n: item.badge })}
+                  className="absolute -top-6 -end-12"
+                />
+              ) : null}
+            </span>
+            <span>{item.label}</span>
+          </ItemAction>
+        );
+      })}
+    </nav>
+  );
+}

package/src/Navigation/Tabs.tsx

@@ -0,0 +1,79 @@
+import { useId, useRef, type ReactElement } from "react";
+import { Direction } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { rovingIndex, useControllable } from "../lib/hooks.ts";
+import { type TabsProps } from "./Navigation.types.ts";
+
+/** Switches between sections of one object. Arrow keys move and select, Home and End jump. */
+export function Tabs({ label, value, tabs, onChange, panels }: TabsProps): ReactElement {
+  const base = useId().replace(/:/g, "");
+  const dir = Direction.useDirection();
+  const [current, setCurrent] = useControllable<string>(
+    undefined,
+    value ?? tabs[0]?.value ?? "",
+    onChange,
+  );
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  return (
+    <div>
+      <div
+        role="tablist"
+        aria-label={label}
+        className="flex gap-16 max-w-full overflow-x-auto border-b border-border-subtle [scrollbar-width:none]"
+      >
+        {tabs.map((tab, i) => {
+          const selected = tab.value === current;
+          return (
+            <button
+              key={tab.value}
+              ref={(el) => {
+                refs.current[i] = el;
+              }}
+              type="button"
+              role="tab"
+              id={`${base}-tab-${i}`}
+              aria-selected={selected}
+              aria-controls={panels ? `${base}-panel-${i}` : undefined}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => setCurrent(tab.value)}
+              onKeyDown={(e) => {
+                const next = rovingIndex(e.key, i, tabs.length, "horizontal", dir);
+                if (next === null) return;
+                e.preventDefault();
+                const target = tabs[next];
+                if (target) setCurrent(target.value);
+                refs.current[next]?.focus();
+              }}
+              className={cx(
+                "relative inline-flex flex-none items-center gap-6 py-8 bg-transparent border-0 whitespace-nowrap cursor-pointer",
+                "font-medium text-text-13 text-text-secondary aria-selected:text-text-primary",
+                "after:absolute after:inset-x-0 after:-bottom-(--stroke-width-hairline) after:h-(--stroke-width-focus) after:bg-transparent aria-selected:after:bg-accent",
+                "pointer-coarse:min-h-target-coarse pointer-coarse:min-w-target-coarse",
+              )}
+            >
+              {tab.label}
+              {tab.count !== undefined ? (
+                <span className="text-text-12 text-text-tertiary tabular-nums">{tab.count}</span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+      {panels
+        ? tabs.map((tab, i) => (
+            <div
+              key={tab.value}
+              role="tabpanel"
+              id={`${base}-panel-${i}`}
+              aria-labelledby={`${base}-tab-${i}`}
+              hidden={tab.value !== current}
+              tabIndex={0}
+              className="pt-16"
+            >
+              {panels[tab.value]}
+            </div>
+          ))
+        : null}
+    </div>
+  );
+}

package/src/Navigation/TopNav.tsx

@@ -0,0 +1,86 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { IconButton } from "../Button/Button.tsx";
+import { Badge } from "../Chips/Chips.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { BrandMark } from "../BrandMark/BrandMark.tsx";
+import { ItemAction } from "./Navigation.shared.tsx";
+import { type TopNavProps } from "./Navigation.types.ts";
+
+/** The Gateway top bar on desktop: brand, the five destinations, search, help and the account menu. */
+export function TopNav({
+  brand,
+  label,
+  person,
+  active,
+  items,
+  onSearch,
+  onHelp,
+  onAccount,
+}: TopNavProps): ReactElement {
+  const t = useT();
+  return (
+    <header
+      className={cx(
+        "flex items-center justify-between gap-16 h-(--ui-topnav) px-20 max-lg:px-16 bg-bg-surface border-b border-border-subtle",
+        "print:hidden",
+      )}
+    >
+      <div className="flex items-center gap-24 max-lg:gap-12 min-w-0">
+        <span className="max-lg:[&_[aria-hidden]+[aria-hidden]]:hidden">
+          <BrandMark name={brand} size="sm" />
+        </span>
+        <nav
+          aria-label={label}
+          className="min-w-0 overflow-x-auto max-md:hidden [scrollbar-width:none]"
+        >
+          {/* The nav scrolls sideways, which clips on both axes: the list's padding holds the 2px focus outline and
+              its 2px offset inside the scroll box, so a focused link keeps its whole ring. */}
+          <ul className="flex gap-4 m-0 p-4 list-none">
+            {items.map((item) => (
+              <li key={item.label}>
+                <ItemAction
+                  item={item}
+                  active={item.label === active}
+                  className={cx(
+                    "inline-flex items-center gap-6 h-row-default px-12 max-lg:px-8 rounded-control no-underline",
+                    "font-medium text-text-14 text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+                    "aria-[current=page]:bg-bg-hover aria-[current=page]:text-text-primary",
+                    "pointer-coarse:min-h-target-coarse pointer-coarse:min-w-target-coarse",
+                  )}
+                >
+                  <Icon name={item.icon} size={16} />
+                  {item.label}
+                  {item.badge ? (
+                    <Badge
+                      count={item.badge}
+                      tone="accent"
+                      label={t("tabbar.badge", { n: item.badge })}
+                    />
+                  ) : null}
+                </ItemAction>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+      <div className="flex flex-none items-center gap-8">
+        <IconButton icon="Search" label={t("command.label")} shortcut="⌘ K" onClick={onSearch} />
+        <IconButton icon="CircleHelp" label={t("help.title")} shortcut="?" onClick={onHelp} />
+        <button
+          type="button"
+          aria-haspopup="dialog"
+          aria-label={t("nav.account", { name: person })}
+          onClick={onAccount}
+          className="xos-hit grid place-items-center size-(--ui-avatar-lg) p-0 rounded-full border-0 bg-transparent cursor-pointer"
+        >
+          <span aria-hidden="true" className="contents">
+            <Avatar name={person} />
+          </span>
+        </button>
+      </div>
+    </header>
+  );
+}

package/src/Navigation/sidebar-classes.ts

@@ -0,0 +1,18 @@
+import { cx } from "../lib/cx.ts";
+
+/*
+ * The Sidebar's classes in a module of their own, for lists built beside it (the Atlas Favorites, which reorder):
+ * a list loaded on demand can share them without pulling the Sidebar itself apart from the page that renders it.
+ */
+
+/** One sidebar item, for lists built beside the Sidebar (the Atlas Favorites, which reorder). */
+export const sidebarItemClass = cx(
+  "flex items-center gap-8 w-full h-control-md px-8 rounded-control border-0 bg-transparent box-border",
+  "font-medium text-text-13 text-text-secondary text-start no-underline cursor-pointer",
+  "hover:bg-bg-hover hover:text-text-primary aria-[current=page]:bg-bg-hover aria-[current=page]:text-text-primary",
+  "pointer-coarse:min-h-target-coarse",
+);
+
+/** The sidebar's frame, for lists built beside the Sidebar so they match it. */
+export const sidebarClass =
+  "w-(--layout-sidebar) max-w-full p-8 box-border bg-bg-surface border border-border-subtle rounded-card print:hidden";

package/src/NotificationCenter/README.md

@@ -0,0 +1,3 @@
+# NotificationCenter
+
+NotificationCenter is the one inbox model: Needs You and For Your Information, each item Done (E), Snoozed (H) or opened, actionable in place.

package/src/NumberInput/README.md

@@ -0,0 +1,3 @@
+# NumberInput
+
+NumberInput takes a number with units, steppers and tabular numerals; blank stays null, never 0.

package/src/OfflineBanner/README.md

@@ -0,0 +1,3 @@
+# OfflineBanner
+
+OfflineBanner shows that Compass is offline and how many actions are queued.

package/src/OnboardingChecklist/README.md

@@ -0,0 +1,3 @@
+# OnboardingChecklist
+
+OnboardingChecklist guides a new org through eight steps: brand, members, first project, jurisdiction, budget, schedule, Compass invite, integration.

package/src/OnboardingPacket/README.md

@@ -0,0 +1,3 @@
+# OnboardingPacket
+
+OnboardingPacket lists each requirement with a time estimate; verified items on file check themselves off, and the engagement cannot go Active until every blocking item passes.

package/src/OpportunityCard/README.md

@@ -0,0 +1,5 @@
+# OpportunityCard
+
+OpportunityCard leads with role, pay, date and place, then a requirements check that shows a green mark or exactly what is missing.
+
+- No posted pay shows Rate on Request.

package/src/OpportunityFilters/README.md

@@ -0,0 +1,3 @@
+# OpportunityFilters
+
+OpportunityFilters combines search, filter chips and the cards or map view.

package/src/OrgChart/README.md

@@ -0,0 +1,5 @@
+# OrgChart
+
+OrgChart draws reporting lines for positions, with vacant positions shown as Vacant rather than hidden.
+
+- Role names and codes come from Bible tab 27.

package/src/OrgSwitcher/README.md

@@ -0,0 +1,3 @@
+# OrgSwitcher
+
+OrgSwitcher moves between every org a person works with; the marketplace sits at the bottom.

package/src/Overlays/Dialog.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement } from "react";
+import { Dialog as RDialog } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useReturnFocus } from "../lib/hooks.ts";
+import { scrimClass, useOverlayOpen } from "./Overlays.shared.tsx";
+import { type DialogProps } from "./Overlays.types.ts";
+import { panelClass } from "./panelClass.tsx";
+
+/** For irreversible actions only; everything else uses Undo. Focus is trapped and Esc closes. */
+export function Dialog({
+  title,
+  children,
+  actions,
+  description,
+  ...control
+}: DialogProps): ReactElement {
+  const [isOpen, setOpen] = useOverlayOpen(control);
+  const returnFocus = useReturnFocus(isOpen);
+  return (
+    <RDialog.Root open={isOpen} onOpenChange={setOpen}>
+      {control.trigger ? <RDialog.Trigger asChild>{control.trigger}</RDialog.Trigger> : null}
+      <RDialog.Portal>
+        <RDialog.Overlay className={scrimClass} />
+        {/* One row of minmax(0, 1fr): an auto row would grow to a tall panel, so max-h-full would not hold it to the viewport. */}
+        <div className="pointer-events-none fixed inset-0 z-dialog grid grid-rows-1 place-items-center p-16">
+          <RDialog.Content
+            onCloseAutoFocus={returnFocus}
+            className={cx(
+              panelClass,
+              "xos-anim-dialog pointer-events-auto w-(--ui-dialog) flex flex-col max-h-full",
+            )}
+            {...(description ? {} : { "aria-describedby": undefined })}
+          >
+            <header className="shrink-0 px-20 pt-20">
+              <RDialog.Title className="m-0 text-heading-16 font-semibold">{title}</RDialog.Title>
+              {description ? (
+                <RDialog.Description className="mt-4 mb-0 text-text-secondary">
+                  {description}
+                </RDialog.Description>
+              ) : null}
+            </header>
+            {/* The body scrolls so a long body never pushes the actions out of the viewport. */}
+            <div className="min-h-0 overflow-y-auto overscroll-contain px-20 pt-8 pb-20 text-text-secondary">
+              {children}
+            </div>
+            <footer className="shrink-0 flex flex-wrap justify-end gap-8 px-20 py-12 border-t border-border-subtle">
+              {actions}
+            </footer>
+          </RDialog.Content>
+        </div>
+      </RDialog.Portal>
+    </RDialog.Root>
+  );
+}