@edgeandnode/eds-react 1.0.2 → 1.1.0

package/src/components/Modal.parts.tsx

@@ -114,10 +114,13 @@ export const ModalRoot = <
   defaultOpen,
   onOpenChange,
   dismissible: passedDismissible,
-  role,
   steps: passedSteps = 1 as Steps,
   currentStep: controlledCurrentStep,
   onCurrentStepChange,
+  role,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   children,
   ...props
 }: ModalProps<Steps, Step>) => {
@@ -325,6 +328,10 @@ export const ModalRoot = <
                   ? 'dialog'
                   : 'alertdialog')
               }
+              aria-label={ariaLabel}
+              // Only when passed, so Base UI's title and description wiring still applies
+              {...(ariaLabelledBy !== undefined && { 'aria-labelledby': ariaLabelledBy })}
+              {...(ariaDescribedBy !== undefined && { 'aria-describedby': ariaDescribedBy })}
               className="
                 fixed inset-0 m-auto h-max
                 max-h-[min(max(100cqb,100vh-100cqb*9999),var(--strict-max-height))]

package/src/components/Pane.parts.tsx

@@ -11,7 +11,6 @@ import {
   useState,
   useSyncExternalStore,
   type ComponentProps,
-  type ElementType,
   type MouseEvent,
   type ReactNode,
   type RefObject,
@@ -25,7 +24,12 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { useCSSPropsPolyfill, useFirstRender, usePrevious, useStyle } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { Presence } from './base/Presence.tsx'
-import { Render, type RenderProp } from './base/Render.tsx'
+import {
+  Render,
+  type AsOrRenderProps,
+  type HTMLElementProps,
+  type RenderProp,
+} from './base/Render.tsx'
 import { PaneContainerMeta, PaneMeta } from './Pane.meta.ts'
 import { ToggleButton, type ToggleButtonProps } from './ToggleButton.tsx'
 
@@ -282,30 +286,31 @@ export function PaneContainer({
 }
 PaneContainer.displayName = 'Pane.Container'
 
-export interface PaneProps extends ComponentProps<'div'>, EDSComponentProps<typeof PaneMeta> {
-  /** @default 'div' */
-  as?: ElementType | undefined
-  /** Unique name for this pane. */
-  name: string
-  /**
-   * Whether the pane is pseudo-modal in overlay mode. When `true`, the overlay shows a backdrop,
-   * receives focus when opened, and can be closed by pressing Escape or interacting with elements
-   * covered by the backdrop.
-   *
-   * @default true
-   */
-  overlayModal?: boolean | undefined
-  /**
-   * Whether the content should stay mounted when the pane is closed.
-   *
-   * @default true
-   */
-  keepMounted?: boolean | undefined
+export declare namespace PaneProps {
+  interface CommonProps extends HTMLElementProps, EDSComponentProps<typeof PaneMeta> {
+    /** Unique name for this pane. */
+    name: string
+    /**
+     * Whether the pane is pseudo-modal in overlay mode. When `true`, the overlay shows a backdrop,
+     * receives focus when opened, and can be closed by pressing Escape or interacting with elements
+     * covered by the backdrop.
+     *
+     * @default true
+     */
+    overlayModal?: boolean | undefined
+    /**
+     * Whether the content should stay mounted when the pane is closed.
+     *
+     * @default true
+     */
+    keepMounted?: boolean | undefined
+  }
 }
 
+export type PaneProps = PaneProps.CommonProps & AsOrRenderProps
+
 export function PaneRoot({
   ref: passedRef,
-  as: Element = 'div',
   name,
   layout,
   side,
@@ -316,7 +321,7 @@ export function PaneRoot({
 }: PaneProps) {
   const { store, pane } = usePaneInternal(name)
 
-  const rootRef = useRef<HTMLDivElement>(null)
+  const rootRef = useRef<HTMLElement>(null)
   const rootPassedRef = useMergedRefs(rootRef, passedRef)
 
   // Observe `--tw-duration` to allow customizing the transition duration via CSS
@@ -379,7 +384,7 @@ export function PaneRoot({
   }
 
   return (
-    <Element
+    <Render
       ref={rootPassedRef}
       id={pane.id}
       data-eds-exposed-open={open}
@@ -587,7 +592,7 @@ export function PaneRoot({
           return <Fragment key={key} />
         })}
       </Presence>
-    </Element>
+    </Render>
   )
 }
 PaneRoot.displayName = 'Pane'
@@ -604,7 +609,7 @@ function useOverlayModalFocus({
   layout,
   overlayOpen,
 }: {
-  rootRef: RefObject<HTMLDivElement | null>
+  rootRef: RefObject<HTMLElement | null>
   store: PaneStore
   name: string
   enabled: boolean

package/src/components/Prose.meta.ts

@@ -8,5 +8,15 @@ export const ProseMeta = createComponent('Prose', {
       values: ['xsmall', 'small', 'medium'],
       defaultValue: 'medium',
     },
+    /**
+     * Use the serif font for headings, e.g. for editorial or marketing content.
+     *
+     * @default false
+     */
+    serif: {
+      type: 'values',
+      values: [false, true],
+      defaultValue: false,
+    },
   },
 })

package/src/components/Prose.tsx

@@ -20,12 +20,12 @@ export interface ProseProps
   children?: string | undefined
 }
 
-export function Prose({ ref: passedRef, size, children, ...props }: ProseProps) {
+export function Prose({ ref: passedRef, size, serif, children, ...props }: ProseProps) {
   useEDS()
 
   const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
     ProseMeta,
-    { size },
+    { size, serif },
     { ref: passedRef },
   )
 
@@ -34,7 +34,7 @@ export function Prose({ ref: passedRef, size, children, ...props }: ProseProps)
       ref={cssPropsPolyfillPassedRef}
       {...mergeProps(
         { className: cn('eds-prose u:text-muted u:text-wrap-style-pretty') },
-        getCSSPropsAttributes(ProseMeta, { size }),
+        getCSSPropsAttributes(ProseMeta, { size, serif }),
         cssPropsPolyfillAttributes,
         props,
       )}
@@ -45,6 +45,7 @@ export function Prose({ ref: passedRef, size, children, ...props }: ProseProps)
           @prop-size-xsmall/prose:prose-xsmall
           @prop-size-small/prose:prose-small
           @prop-size-medium/prose:prose-medium
+          @prop-serif-true/prose:prose-serif
         "
       >
         <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>

package/src/components/Select.parts.tsx

@@ -5,12 +5,14 @@ import {
   createContext,
   isValidElement,
   useContext,
+  useState,
   type ComponentProps,
   type ElementType,
   type ReactElement,
   type ReactNode,
 } from 'react'
 import { mergeProps } from '@base-ui/react'
+import { Menu as BaseUIMenu } from '@base-ui/react/menu'
 import flattenChildren from 'react-keyed-flatten-children'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
@@ -23,7 +25,7 @@ import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Field, type FieldProps } from './base/Field.tsx'
 import { Render, type RenderFnHandlers, type RenderFnProps } from './base/Render.tsx'
 import type { MenuMeta } from './Menu.meta.ts'
-import { Menu } from './Menu.tsx'
+import { Menu, type MenuProps } from './Menu.tsx'
 import type { SelectMeta, SelectOptionMeta } from './Select.meta.ts'
 
 type MenuCSSProps = EDSComponentProps<typeof MenuMeta>
@@ -282,11 +284,15 @@ export declare namespace SelectProps {
     /**
      * `true` for the default filter; a function for custom filtering. Auto-enables when
      * `searchValue` or `onSearchValueChange` is set. When truthy and `header` is unset,
-     * `Menu.Search` becomes the default header.
+     * `Menu.Search` becomes the default header. A custom `header` must include `Menu.Search`.
      */
     searchable?: boolean | SelectSearchableFn<T>
     searchValue?: string
-    onSearchValueChange?: (value: string) => void
+    /**
+     * Called when the search query changes, including when it's reset after the menu closes (then
+     * `eventDetails.reason` is `'popup-close'`).
+     */
+    onSearchValueChange?: MenuProps['onSearchValueChange']
   }
 
   interface DeclarativeProps {
@@ -350,7 +356,7 @@ export function SelectRoot<T extends OptionValue = number>({
   alignOffset,
   matchTriggerWidth = 'at-least',
   matchTriggerHeight,
-  header: passedHeader,
+  header,
   footer,
   empty,
   trigger: passedTrigger,
@@ -374,11 +380,12 @@ export function SelectRoot<T extends OptionValue = number>({
     onValueChange as ((value: T | T[] | undefined) => void) | undefined,
   )
 
-  const [searchValue, setSearchValue] = useControlled(
-    controlledSearchValue,
-    '',
-    onSearchValueChange,
-  )
+  /**
+   * Not `useControlled`, which skips a change equal to the previous one even if the parent ignored
+   * it (e.g. the reset after the menu closes), so clearing the search would then do nothing.
+   */
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState('')
+  const searchValue = controlledSearchValue ?? uncontrolledSearchValue
 
   /**
    * `searchable` auto-enables when `searchValue` / `onSearchValueChange` is wired (matches how
@@ -424,16 +431,9 @@ export function SelectRoot<T extends OptionValue = number>({
       }
     : null
 
-  /** Default `header` to a wired `<Menu.Search>` when search is enabled and none was provided. */
-  const header =
-    passedHeader !== undefined ? (
-      passedHeader
-    ) : searchEnabled ? (
-      <Menu.Search value={searchValue} onValueChange={setSearchValue} />
-    ) : undefined
-
   const renderMenuContent = () => {
-    if (augmentedChildren.length === 0) {
+    // A searchable menu shows `empty` itself when no option matches
+    if (augmentedChildren.length === 0 && !searchEnabled) {
       if (empty === undefined) return <Menu.Empty />
       return typeof empty === 'string' ? <Menu.Empty>{empty}</Menu.Empty> : empty
     }
@@ -583,14 +583,7 @@ export function SelectRoot<T extends OptionValue = number>({
               {...radioGroupProps}
               open={open}
               defaultOpen={defaultOpen}
-              onOpenChange={(newOpen) => {
-                // Reset uncontrolled search on open (not close) — resetting on close would flash
-                // the unfiltered list mid close-animation. Controlled consumers own their lifecycle.
-                if (newOpen && searchEnabled && controlledSearchValue === undefined) {
-                  setSearchValue('')
-                }
-                onOpenChange?.(newOpen)
-              }}
+              onOpenChange={onOpenChange}
               side={side}
               gap={gap}
               align={align}
@@ -599,6 +592,13 @@ export function SelectRoot<T extends OptionValue = number>({
               matchTriggerHeight={matchTriggerHeight}
               header={header}
               footer={footer}
+              searchable={searchEnabled && 'manual'}
+              searchValue={searchValue}
+              onSearchValueChange={(newSearchValue, eventDetails) => {
+                setUncontrolledSearchValue(newSearchValue)
+                onSearchValueChange?.(newSearchValue, eventDetails)
+              }}
+              empty={empty}
               highlightCheckedOnOpen
               trigger={menuTrigger}
             >
@@ -654,6 +654,8 @@ function useSelectOptions<T extends OptionValue>({
     addonBefore: ReactNode
     addonAfter: ReactNode
   }> = []
+  const { contains } = BaseUIMenu.useFilter()
+  const trimmedSearchValue = searchValue.trim()
 
   /**
    * Per-iteration helper: records the option in `optionsList` (always the full set) and returns the
@@ -668,12 +670,18 @@ function useSelectOptions<T extends OptionValue>({
     renderNode: () => ReactNode,
   ): ReactNode[] => {
     optionsList.push({ value, label, addonBefore, addonAfter })
-    if (searchEnabled) {
+    if (searchEnabled && trimmedSearchValue !== '') {
       const stringLabel = reactNodeToString(label)
       const passes =
         typeof searchable === 'function'
-          ? searchable({ value, label: stringLabel, addonBefore, addonAfter, searchValue })
-          : stringLabel.toLowerCase().includes(searchValue.toLowerCase())
+          ? searchable({
+              value,
+              label: stringLabel,
+              addonBefore,
+              addonAfter,
+              searchValue: trimmedSearchValue,
+            })
+          : contains(stringLabel, trimmedSearchValue)
       if (!passes) return []
     }
     return [renderNode()]

package/src/components/ThemeSwitcher.tsx

@@ -18,19 +18,16 @@ export interface ThemeSwitcherProps
     Omit<SegmentedControlProps<'dark' | 'light'>, 'value' | 'defaultValue' | 'onValueChange'>,
     EDSComponentProps<typeof ThemeSwitcherMeta> {
   /**
-   * Defaults to a label that flips with `activeTheme` (e.g. `Switch to light theme` when dark is
-   * active). Accepts a function that receives `activeTheme` for dynamic content. Pass `null` to
-   * disable.
+   * Defaults to a label that flips with the page's theme (e.g. `Switch to light theme` when it's
+   * dark). Accepts a function that receives the page's theme, resolved to `'dark'` or `'light'`,
+   * for dynamic content. Pass `null` to disable.
    */
-  tooltip?:
-    | ThemeSwitcherTooltip
-    | ((activeTheme: ResolvedTheme) => ThemeSwitcherTooltip)
-    | undefined
+  tooltip?: ThemeSwitcherTooltip | ((theme: ResolvedTheme) => ThemeSwitcherTooltip) | undefined
 }
 
 /**
  * Toggles the EDS theme between light and dark. Right-click for a context menu with a "Use system
- * appearance" toggle. Always uncontrolled — reads `activeTheme` from `useEDS()` and drives
+ * appearance" toggle. Always uncontrolled — reads the theme from `useEDS()` and drives
  * `setTheme()`. `theme="system"` (or `defaultTheme="system"`) on `EDSProvider` also opts into the
  * user's OS preference.
  */
@@ -39,23 +36,24 @@ export function ThemeSwitcher({
   tooltip: passedTooltip,
   ...props
 }: ThemeSwitcherProps) {
-  const { theme, activeTheme, setTheme } = useEDS()
+  const { theme, setTheme, systemTheme } = useEDS()
+  const pageTheme = theme === 'system' ? systemTheme : theme
 
-  const tooltip = typeof passedTooltip === 'function' ? passedTooltip(activeTheme) : passedTooltip
+  const tooltip = typeof passedTooltip === 'function' ? passedTooltip(pageTheme) : passedTooltip
 
   return (
     <Menu
       triggerMode="right-click"
       trigger={
         <Tooltip
-          content={`Switch to ${activeTheme === 'dark' ? 'light' : 'dark'} theme`}
+          content={`Switch to ${pageTheme === 'dark' ? 'light' : 'dark'} theme`}
           closeOnClick={false}
           {...getTooltipProps(tooltip)}
           triggerProps="forward"
         >
           <SegmentedControl<'dark' | 'light'>
             aria-label={ariaLabel}
-            value={activeTheme}
+            value={pageTheme}
             onValueChange={setTheme}
             {...props}
           >
@@ -72,7 +70,7 @@ export function ThemeSwitcher({
       <Menu.Item
         type="checkbox"
         checked={theme === 'system'}
-        onCheckedChange={(checked) => setTheme(checked ? 'system' : activeTheme)}
+        onCheckedChange={(checked) => setTheme(checked ? 'system' : pageTheme)}
       >
         Use system appearance
       </Menu.Item>

package/src/components/base/MaybeButtonOrLink.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ElementType } from 'react'
+import type { ElementType } from 'react'
 
 import {
   ButtonOrLink,
@@ -8,7 +8,7 @@ import {
   type InternalButtonOrLinkProps,
   type OmitInternalButtonOrLinkProps,
 } from './ButtonOrLink.tsx'
-import type { RenderFn } from './Render.tsx'
+import type { HTMLElementProps, RenderFn } from './Render.tsx'
 
 type OtherElementRenderState = {
   category: 'other'
@@ -43,9 +43,9 @@ export declare namespace MaybeButtonOrLinkProps {
   }
   export type OtherElementProps =
     OmitInternalButtonOrLinkProps<InternalButtonOrLinkProps.CommonProps> &
-      ComponentProps<'span'> & {
+      HTMLElementProps & {
         onClick?: InternalButtonOrLinkProps.ButtonProps['onClick'] // Not technically correct, but prevents the event from being `any` when `as` is not specified
-        as?: ElementType | undefined
+        as?: keyof HTMLElementTagNameMap | undefined
         render?: RenderFn<MaybeButtonOrLinkRenderState> | undefined
         disabled?: undefined
         type?: undefined
@@ -67,14 +67,17 @@ type InternalMaybeButtonOrLinkProps = MaybeButtonOrLinkProps &
 
 /**
  * Renders a `ButtonOrLink` if one of `href` or `onClick` is passed along with no `as`. Otherwise,
- * renders the element type passed in `as` (defaulting to `span`).
+ * renders the tag name passed in `as` (defaulting to `span`), so an element that isn't a button can
+ * still have an `onClick` (e.g. a `label`). Like `ButtonOrLink`'s (and unlike `Render`'s), the
+ * `render` function wraps that element instead of replacing it: it receives it as `Element`, along
+ * with the `elementProps` to spread on it.
  */
 export function MaybeButtonOrLink(props: InternalMaybeButtonOrLinkProps) {
   if ((props.href !== undefined || props.onClick !== undefined) && props.as === undefined) {
     return <ButtonOrLink {...(props as InternalButtonOrLinkProps)} />
   } else {
     const {
-      as: Element = 'span',
+      as: tagName = 'span',
       render,
       disabled: _disabled,
       inline: _inline,
@@ -86,6 +89,8 @@ export function MaybeButtonOrLink(props: InternalMaybeButtonOrLinkProps) {
       ...otherElementProps
     } = props
 
+    // The union of every HTML tag name is too complex a type for JSX
+    const Element = tagName as ElementType
     const renderState: OtherElementRenderState = {
       category: 'other',
       role: props.role ?? 'none',

package/src/components/base/Render.tsx

@@ -30,22 +30,46 @@ export type RenderProp<State extends RenderFnState = undefined, ElementProps = u
   | ReactElement<ElementProps>
   | RenderFn<State, ElementProps>
 
-export interface RenderProps<State extends RenderFnState = undefined> {
-  render: RenderProp<State>
+/**
+ * Props of a generic HTML element, for components whose element can be changed with `as` or
+ * `render`.
+ */
+export interface HTMLElementProps extends HTMLProps<HTMLElement> {}
+
+/**
+ * Props to change the element a component renders: a tag name with `as`, or an element or render
+ * function with `render`, which is also how to pass props specific to that element (e.g.
+ * `render={<a href="/" />}`).
+ */
+export type AsOrRenderProps<State extends RenderFnState = undefined> =
+  | {
+      /** Tag name of the element to render. */
+      as?: keyof HTMLElementTagNameMap | undefined
+      render?: undefined
+    }
+  | {
+      as?: undefined
+      /** Element or render function to render instead of the default element. */
+      render?: RenderProp<State> | undefined
+    }
+
+export type RenderProps<State extends RenderFnState = undefined> = AsOrRenderProps<State> & {
   state?: State | undefined
   [key: string]: unknown
 }
 
 /**
- * A utility component that provides polymorphic rendering capabilities. It can render as any HTML
- * element or React component.
+ * A utility component that provides polymorphic rendering capabilities. It renders a `div` by
+ * default, the tag name passed in `as`, or the element or render function passed in `render`.
  */
 export function Render<State extends RenderFnState>({
+  as,
   render,
   state,
   ...props
 }: RenderProps<State>) {
   return useRender({
+    defaultTagName: as,
     render,
     state: state !== undefined ? state : undefined,
     props,

package/src/components/base/index.ts

@@ -25,6 +25,8 @@ export { Portal } from './Portal.tsx'
 export { Presence, usePresence, type PresenceProps } from './Presence.tsx'
 export {
   Render,
+  type AsOrRenderProps,
+  type HTMLElementProps,
   type RenderFnProps,
   type RenderFnState,
   type RenderFn,

package/src/components/index.ts

@@ -44,7 +44,14 @@ export { Label, type LabelProps } from './Label.tsx'
 export { LabelMeta } from './Label.meta.ts'
 export { Link, type LinkProps } from './Link.tsx'
 export { LinkMeta } from './Link.meta.ts'
-export { Dark, Light, type LocalThemeProps } from './LocalTheme.tsx'
+export {
+  Dark,
+  Light,
+  LocalTheme,
+  type DarkProps,
+  type LightProps,
+  type LocalThemeProps,
+} from './LocalTheme.tsx'
 export {
   Menu,
   type MenuEmptyProps,

package/src/hooks/useEDS.ts

@@ -12,21 +12,29 @@ export function useEDS() {
   }
 
   return {
-    /** The page's theme: `'dark'`, `'light'`, or `'system'` (follows the OS preference) */
+    /**
+     * The page's theme, as set on `EDSProvider` or with `setTheme`: `'dark'`, `'light'`, or
+     * `'system'` (follows `systemTheme`).
+     */
     theme: context.theme,
     /** Changes the page's theme (use `ThemeSwitcher` for the UI) */
     setTheme: context.setTheme,
-    /** The page's theme, with `'system'` resolved to `'dark'` or `'light'` */
-    activeTheme: context.activeTheme,
+    /** The theme the OS prefers (`prefers-color-scheme`), which the `'system'` theme follows. */
+    systemTheme: context.systemTheme,
     /**
-     * The theme of the nearest `Dark` or `Light` ancestor, or `undefined` if there's none. Use
-     * `localTheme ?? activeTheme` to get the theme content is rendered in.
+     * The theme of the nearest `Dark`, `Light`, or `LocalTheme` ancestor, or `undefined` if there's
+     * none.
      */
     localTheme,
     /**
-     * The class of the nearest `Dark` or `Light` ancestor, or `undefined` if there's none. Add it
-     * to content rendered outside of that ancestor in the DOM (e.g. with `createPortal`) so it
-     * keeps its theme.
+     * The theme content is rendered in: `localTheme`, or the page's theme with `'system'` resolved
+     * to `systemTheme`.
+     */
+    activeTheme: localTheme ?? (context.theme === 'system' ? context.systemTheme : context.theme),
+    /**
+     * The class of the nearest `Dark`, `Light`, or `LocalTheme` ancestor, or `undefined` if there's
+     * none. Add it to content rendered outside of that ancestor in the DOM (e.g. with
+     * `createPortal`) so it keeps its theme.
      */
     localThemeClass: localTheme !== undefined ? THEME_CLASSES[localTheme] : undefined,
     /** The `dir` and `lang` of `EDSProvider`, to spread on content rendered outside of it. */

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/index.ts'
-export { EDSProvider } from './EDSProvider.tsx'
+export { EDSProvider, type ResolvedTheme, type Theme } from './EDSProvider.tsx'
+export { getThemeFromCookies } from './theme-persistence.ts'

package/src/theme-persistence.ts

@@ -0,0 +1,31 @@
+// Not a client module, so server components can call `getThemeFromCookies`
+
+import type { Theme } from './EDSContext.ts'
+
+export const PERSISTENCE_KEY = 'eds-active-theme'
+export const COOKIE_REGEX = new RegExp(`(?:^|;\\s*)${PERSISTENCE_KEY}=([^;]+)`)
+
+export const VALID_THEMES: readonly Theme[] = ['dark', 'light', 'system']
+
+export function isValidTheme(value: unknown): value is Theme {
+  return typeof value === 'string' && (VALID_THEMES as readonly string[]).includes(value)
+}
+
+export function parseThemeCookie(cookies: string | null) {
+  const value = cookies?.match(COOKIE_REGEX)?.[1]
+  return isValidTheme(value) ? value : undefined
+}
+
+/**
+ * Returns the theme saved by `EDSProvider`'s `persistTheme="cookie"` from the request's headers, or
+ * `undefined` if there's none. Pass the result to `defaultTheme`, so the server renders the saved
+ * theme too.
+ *
+ * @example
+ *   ````tsx
+ *   <EDSProvider persistTheme="cookie" defaultTheme={getThemeFromCookies(await headers())}>
+ *   ````
+ */
+export function getThemeFromCookies(headers: Pick<Headers, 'get'>) {
+  return parseThemeCookie(headers.get('cookie'))
+}