@dxos/react-ui 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/testing/decorators/withLayout.tsx", "../../../../src/testing/decorators/withLayoutVariants.tsx", "../../../../src/testing/decorators/withTheme.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type FC, type PropsWithChildren, memo } from 'react';\n\nimport { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren>;\n\nexport type ContainerType = 'fullscreen' | 'column';\n\nexport type WithLayoutProps =\n  | FC<ContainerProps>\n  | {\n      classNames?: ClassNameValue;\n      layout?: ContainerType;\n      scroll?: boolean;\n    };\n\n/**\n * Adds layout container.\n */\nexport const withLayout =\n  (props: WithLayoutProps = {}): Decorator =>\n  (Story) => {\n    // Prevent re-rendering of the story.\n    const MemoizedStory = memo(Story);\n    if (typeof props === 'function') {\n      const Container = props;\n      return (\n        <Container>\n          <MemoizedStory />\n        </Container>\n      );\n    } else {\n      const { layout = 'fullscreen', classNames, scroll } = props;\n      const Container = layouts[layout] ?? layouts.fullscreen;\n      return (\n        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>\n          <MemoizedStory />\n        </Container>\n      );\n    }\n  };\n\nconst layouts: Record<ContainerType, FC<ContainerProps>> = {\n  fullscreen: ({ children, classNames }: ContainerProps) => (\n    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-deckSurface', classNames)}>\n      {children}\n    </div>\n  ),\n\n  column: ({ children, classNames }: ContainerProps) => (\n    <div role='none' className='fixed inset-0 flex justify-center overflow-hidden bg-deckSurface'>\n      <div role='none' className={mx('flex flex-col is-[40rem] bg-baseSurface', classNames)}>\n        {children}\n      </div>\n    </div>\n  ),\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/ui-theme';\nimport { type Density, type Elevation } from '@dxos/ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => (\n  <div className={mx('flex flex-col bs-full p-4 gap-4', className)}>\n    {elevations?.map(({ elevation, surface }) =>\n      densities?.map((density) => (\n        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n          <Story />\n        </Container>\n      )),\n    )}\n  </div>\n);\n\nexport const withLayoutVariants = ({\n  elevations = [\n    { elevation: 'base', surface: 'bg-baseSurface' },\n    { elevation: 'positioned', surface: 'bg-cardSurface' },\n    { elevation: 'dialog', surface: 'bg-modalSurface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => (\n    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>\n      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />\n      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { defaultTx } from '@dxos/ui-theme';\nimport { type ThemeMode } from '@dxos/ui-types';\n\nimport { ThemeProvider, Tooltip } from '../../components';\n\n/**\n * Adds theme decorator (add to preview.ts)\n */\nexport const withTheme: Decorator = (Story, context) => {\n  const {\n    globals: { theme },\n    parameters: { translations },\n  } = context;\n\n  // Prevent re-rendering of the story.\n  const MemoizedStory = memo(Story);\n\n  return (\n    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>\n      <Tooltip.Provider>\n        <MemoizedStory />\n      </Tooltip.Provider>\n    </ThemeProvider>\n  );\n};\n"],
-  "mappings": ";;;;;;AAKA,OAAOA,SAA0CC,YAAY;AAG7D,SAASC,UAAU;AAiBZ,IAAMC,aACX,CAACC,QAAyB,CAAC,MAC3B,CAACC,UAAAA;AAEC,QAAMC,gBAAgBC,qBAAKF,KAAAA;AAC3B,MAAI,OAAOD,UAAU,YAAY;AAC/B,UAAMI,aAAYJ;AAClB,WACE,sBAAA,cAACI,YAAAA,MACC,sBAAA,cAACF,eAAAA,IAAAA,CAAAA;EAGP,OAAO;AACL,UAAM,EAAEG,SAAS,cAAcC,YAAYC,OAAM,IAAKP;AACtD,UAAMI,aAAYI,QAAQH,MAAAA,KAAWG,QAAQC;AAC7C,WACE,sBAAA,cAACL,YAAAA;MAAUE,YAAYI,GAAGJ,YAAYC,SAAS,oBAAoB,iBAAA;OACjE,sBAAA,cAACL,eAAAA,IAAAA,CAAAA;EAGP;AACF;AAEF,IAAMM,UAAqD;EACzDC,YAAY,CAAC,EAAEE,UAAUL,WAAU,MACjC,sBAAA,cAACM,OAAAA;IAAIC,MAAK;IAAOC,WAAWJ,GAAG,qDAAqDJ,UAAAA;KACjFK,QAAAA;EAILI,QAAQ,CAAC,EAAEJ,UAAUL,WAAU,MAC7B,sBAAA,cAACM,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,sBAAA,cAACF,OAAAA;IAAIC,MAAK;IAAOC,WAAWJ,GAAG,2CAA2CJ,UAAAA;KACvEK,QAAAA,CAAAA;AAIT;;;ACzDA,OAAOK,YAA2D;AAElE,SAASC,MAAAA,KAAIC,qBAAqB;AAQlC,IAAMC,YAAY,CAAC,EAAEC,UAAUC,WAAWC,QAAO,MAC/C,gBAAAC,OAAA,cAACC,OAAAA;EAAIC,WAAWC,IAAG,sCAAsCJ,SAASK,cAAc;IAAEN;EAAU,CAAA,CAAA;GAAMD,QAAAA;AAGpG,IAAMQ,QAAQ,CAAC,EACbC,OACAC,YACAC,WACAN,UAAS,MAET,gBAAAF,OAAA,cAACC,OAAAA;EAAIC,WAAWC,IAAG,mCAAmCD,SAAAA;GACnDK,YAAYE,IAAI,CAAC,EAAEX,WAAWC,QAAO,MACpCS,WAAWC,IAAI,CAACC,YACd,gBAAAV,OAAA,cAACJ,WAAAA;EAAUe,KAAK,GAAGb,SAAAA,KAAcY,OAAAA;EAAWX;EAAkBD;GAC5D,gBAAAE,OAAA,cAACM,OAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAOJ,IAAMM,qBAAqB,CAAC,EACjCL,aAAa;EACX;IAAET,WAAW;IAAQC,SAAS;EAAiB;EAC/C;IAAED,WAAW;IAAcC,SAAS;EAAiB;EACrD;IAAED,WAAW;IAAUC,SAAS;EAAkB;GAEpDS,YAAY;EAAC;EAAS,IACZ,CAAC,MAAC;AACZ,SAAO,CAACF,UACN,gBAAAN,OAAA,cAACC,OAAAA;IAAIC,WAAU;KACb,gBAAAF,OAAA,cAACK,OAAAA;IAAMC;IAAcJ,WAAU;IAAQK;IAAwBC;MAC/D,gBAAAR,OAAA,cAACK,OAAAA;IAAMC;IAAcJ,WAAU;IAAOK;IAAwBC;;AAGpE;;;AC7CA,OAAOK,UAASC,QAAAA,aAAY;AAE5B,SAASC,iBAAiB;AAQnB,IAAMC,YAAuB,CAACC,OAAOC,YAAAA;AAC1C,QAAM,EACJC,SAAS,EAAEC,MAAK,GAChBC,YAAY,EAAEC,aAAY,EAAE,IAC1BJ;AAGJ,QAAMK,gBAAgBC,gBAAAA,MAAKP,KAAAA;AAE3B,SACE,gBAAAQ,OAAA,cAACC,eAAAA;IAAcC,IAAIC;IAAWC,WAAWT;IAAoBU,oBAAoBR;IAAcS,SAAAA;KAC7F,gBAAAN,OAAA,cAACO,QAAQC,UAAQ,MACf,gBAAAR,OAAA,cAACF,eAAAA,IAAAA,CAAAA,CAAAA;AAIT;",
-  "names": ["React", "memo", "mx", "withLayout", "props", "Story", "MemoizedStory", "memo", "Container", "layout", "classNames", "scroll", "layouts", "fullscreen", "mx", "children", "div", "role", "className", "column", "React", "mx", "surfaceShadow", "Container", "children", "elevation", "surface", "React", "div", "className", "mx", "surfaceShadow", "Panel", "Story", "elevations", "densities", "map", "density", "key", "withLayoutVariants", "React", "memo", "defaultTx", "withTheme", "Story", "context", "globals", "theme", "parameters", "translations", "MemoizedStory", "memo", "React", "ThemeProvider", "tx", "defaultTx", "themeMode", "resourceExtensions", "noCache", "Tooltip", "Provider"]
+  "sources": ["../../../../src/testing/decorators/withLayout.tsx", "../../../../src/testing/decorators/withLayoutVariants.tsx", "../../../../src/testing/decorators/withTheme.tsx", "../../../../src/testing/Loading.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type FC, type PropsWithChildren, memo } from 'react';\n\nimport { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren>;\n\nexport type ContainerType = 'default' | 'fullscreen' | 'centered' | 'column';\n\nexport type WithLayoutProps =\n  | FC<ContainerProps>\n  | {\n      classNames?: ClassNameValue;\n      layout?: ContainerType;\n      scroll?: boolean;\n    };\n\n/**\n * Adds layout container.\n */\nexport const withLayout =\n  (props: WithLayoutProps = {}): Decorator =>\n  (Story) => {\n    // Prevent re-rendering of the story.\n    const MemoizedStory = memo(Story);\n    if (typeof props === 'function') {\n      const Container = props;\n      return (\n        <Container>\n          <MemoizedStory />\n        </Container>\n      );\n    } else {\n      const { layout = 'default', classNames, scroll } = props;\n      const Container = layouts[layout] ?? layouts.fullscreen;\n      return (\n        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>\n          <MemoizedStory />\n        </Container>\n      );\n    }\n  };\n\nconst layouts: Record<ContainerType, FC<ContainerProps>> = {\n  default: ({ classNames, children }: ContainerProps) => (\n    <div role='none' className={mx('p-4', classNames)}>\n      {children}\n    </div>\n  ),\n\n  fullscreen: ({ classNames, children }: ContainerProps) => (\n    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-base-surface', classNames)}>\n      {children}\n    </div>\n  ),\n\n  centered: ({ classNames, children }: ContainerProps) => (\n    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-base-surface')}>\n      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>\n        {children}\n      </div>\n    </div>\n  ),\n\n  column: ({ classNames, children }: ContainerProps) => (\n    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-base-surface'>\n      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>\n        {children}\n      </div>\n    </div>\n  ),\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/ui-theme';\nimport { type Density, type Elevation } from '@dxos/ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('p-4 rounded-sm', surface, surfaceShadow({ elevation }))}>{children}</div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => {\n  return (\n    <div className={mx('flex flex-col h-full p-8 gap-8', className)}>\n      {elevations?.map(({ elevation, surface }) =>\n        densities?.map((density) => (\n          <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n            <Story />\n          </Container>\n        )),\n      )}\n    </div>\n  );\n};\n\nexport const withLayoutVariants = ({\n  elevations = [\n    { elevation: 'dialog', surface: 'bg-modal-surface' },\n    { elevation: 'positioned', surface: 'bg-card-surface' },\n    { elevation: 'base', surface: 'bg-base-surface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { defaultTx } from '@dxos/ui-theme';\nimport { type ThemeMode } from '@dxos/ui-types';\n\nimport { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';\n\n/**\n * Adds theme decorator.\n */\nexport const withTheme =\n  ({ tx = defaultTx, ...props }: Partial<ThemeContextValue> = {}): Decorator =>\n  (Story, context) => {\n    const {\n      globals: { theme },\n      parameters: { translations },\n    } = context;\n\n    // Prevent re-rendering of the story.\n    const MemoizedStory = memo(Story);\n\n    return (\n      <ThemeProvider {...props} tx={tx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>\n        <Tooltip.Provider>\n          <MemoizedStory />\n        </Tooltip.Provider>\n      </ThemeProvider>\n    );\n  };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { mx } from '@dxos/ui-theme';\nimport { safeStringify } from '@dxos/util';\nimport React, { useEffect, useState } from 'react';\n\nexport type LoadingProps = { data?: any };\n\n/**\n * Storybook loading component.\n */\nexport const Loading = ({ data }: LoadingProps) => {\n  const [visible, setVisible] = useState(false);\n  useEffect(() => {\n    const t = setTimeout(() => setVisible(true), 500);\n    return () => clearTimeout(t);\n  }, []);\n  return (\n    <div className={mx('flex flex-col opacity-0 transition delay-1000 duration-1000', visible && 'opacity-100')}>\n      <h2 className='uppercase'>Loading</h2>\n      <pre>{safeStringify(data, undefined, 2)}</pre>\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;AAKA,OAAOA,SAA0CC,YAAY;AAG7D,SAASC,UAAU;AAiBZ,IAAMC,aACX,CAACC,QAAyB,CAAC,MAC3B,CAACC,UAAAA;AAEC,QAAMC,gBAAgBC,qBAAKF,KAAAA;AAC3B,MAAI,OAAOD,UAAU,YAAY;AAC/B,UAAMI,aAAYJ;AAClB,WACE,sBAAA,cAACI,YAAAA,MACC,sBAAA,cAACF,eAAAA,IAAAA,CAAAA;EAGP,OAAO;AACL,UAAM,EAAEG,SAAS,WAAWC,YAAYC,OAAM,IAAKP;AACnD,UAAMI,aAAYI,QAAQH,MAAAA,KAAWG,QAAQC;AAC7C,WACE,sBAAA,cAACL,YAAAA;MAAUE,YAAYI,GAAGJ,YAAYC,SAAS,oBAAoB,iBAAA;OACjE,sBAAA,cAACL,eAAAA,IAAAA,CAAAA;EAGP;AACF;AAEF,IAAMM,UAAqD;EACzDG,SAAS,CAAC,EAAEL,YAAYM,SAAQ,MAC9B,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAWL,GAAG,OAAOJ,UAAAA;KACnCM,QAAAA;EAILH,YAAY,CAAC,EAAEH,YAAYM,SAAQ,MACjC,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAWL,GAAG,sDAAsDJ,UAAAA;KAClFM,QAAAA;EAILI,UAAU,CAAC,EAAEV,YAAYM,SAAQ,MAC/B,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAWL,GAAG,uEAAA;KAC7B,sBAAA,cAACG,OAAAA;IAAIC,MAAK;IAAOC,WAAWL,GAAG,4CAA4CJ,UAAAA;KACxEM,QAAAA,CAAAA;EAKPK,QAAQ,CAAC,EAAEX,YAAYM,SAAQ,MAC7B,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,sBAAA,cAACF,OAAAA;IAAIC,MAAK;IAAOC,WAAWL,GAAG,4CAA4CJ,UAAAA;KACxEM,QAAAA,CAAAA;AAIT;;;ACvEA,OAAOM,YAA2D;AAElE,SAASC,MAAAA,KAAIC,qBAAqB;AAQlC,IAAMC,YAAY,CAAC,EAAEC,UAAUC,WAAWC,QAAO,MAC/C,gBAAAC,OAAA,cAACC,OAAAA;EAAIC,WAAWC,IAAG,kBAAkBJ,SAASK,cAAc;IAAEN;EAAU,CAAA,CAAA;GAAMD,QAAAA;AAGhF,IAAMQ,QAAQ,CAAC,EACbC,OACAC,YACAC,WACAN,UAAS,MACkD;AAC3D,SACE,gBAAAF,OAAA,cAACC,OAAAA;IAAIC,WAAWC,IAAG,kCAAkCD,SAAAA;KAClDK,YAAYE,IAAI,CAAC,EAAEX,WAAWC,QAAO,MACpCS,WAAWC,IAAI,CAACC,YACd,gBAAAV,OAAA,cAACJ,WAAAA;IAAUe,KAAK,GAAGb,SAAAA,KAAcY,OAAAA;IAAWX;IAAkBD;KAC5D,gBAAAE,OAAA,cAACM,OAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;AAEO,IAAMM,qBAAqB,CAAC,EACjCL,aAAa;EACX;IAAET,WAAW;IAAUC,SAAS;EAAmB;EACnD;IAAED,WAAW;IAAcC,SAAS;EAAkB;EACtD;IAAED,WAAW;IAAQC,SAAS;EAAkB;GAElDS,YAAY;EAAC;EAAS,IACZ,CAAC,MAAC;AACZ,SAAO,CAACF,UAAU,gBAAAN,OAAA,cAACK,OAAAA;IAAMC;IAAcC;IAAwBC;;AACjE;;;AC1CA,OAAOK,UAASC,QAAAA,aAAY;AAE5B,SAASC,iBAAiB;AAQnB,IAAMC,YACX,CAAC,EAAEC,KAAKC,WAAW,GAAGC,MAAAA,IAAsC,CAAC,MAC7D,CAACC,OAAOC,YAAAA;AACN,QAAM,EACJC,SAAS,EAAEC,MAAK,GAChBC,YAAY,EAAEC,aAAY,EAAE,IAC1BJ;AAGJ,QAAMK,gBAAgBC,gBAAAA,MAAKP,KAAAA;AAE3B,SACE,gBAAAQ,OAAA,cAACC,eAAAA;IAAe,GAAGV;IAAOF;IAAQa,WAAWP;IAAoBQ,oBAAoBN;IAAcO,SAAAA;KACjG,gBAAAJ,OAAA,cAACK,QAAQC,UAAQ,MACf,gBAAAN,OAAA,cAACF,eAAAA,IAAAA,CAAAA,CAAAA;AAIT;;;AC7BF,SAASS,MAAAA,WAAU;AACnB,SAASC,qBAAqB;AAC9B,OAAOC,UAASC,WAAWC,gBAAgB;AAOpC,IAAMC,UAAU,CAAC,EAAEC,KAAI,MAAgB;AAC5C,QAAM,CAACC,SAASC,UAAAA,IAAcC,SAAS,KAAA;AACvCC,YAAU,MAAA;AACR,UAAMC,IAAIC,WAAW,MAAMJ,WAAW,IAAA,GAAO,GAAA;AAC7C,WAAO,MAAMK,aAAaF,CAAAA;EAC5B,GAAG,CAAA,CAAE;AACL,SACE,gBAAAG,OAAA,cAACC,OAAAA;IAAIC,WAAWC,IAAG,+DAA+DV,WAAW,aAAA;KAC3F,gBAAAO,OAAA,cAACI,MAAAA;IAAGF,WAAU;KAAY,SAAA,GAC1B,gBAAAF,OAAA,cAACK,OAAAA,MAAKC,cAAcd,MAAMe,QAAW,CAAA,CAAA,CAAA;AAG3C;",
+  "names": ["React", "memo", "mx", "withLayout", "props", "Story", "MemoizedStory", "memo", "Container", "layout", "classNames", "scroll", "layouts", "fullscreen", "mx", "default", "children", "div", "role", "className", "centered", "column", "React", "mx", "surfaceShadow", "Container", "children", "elevation", "surface", "React", "div", "className", "mx", "surfaceShadow", "Panel", "Story", "elevations", "densities", "map", "density", "key", "withLayoutVariants", "React", "memo", "defaultTx", "withTheme", "tx", "defaultTx", "props", "Story", "context", "globals", "theme", "parameters", "translations", "MemoizedStory", "memo", "React", "ThemeProvider", "themeMode", "resourceExtensions", "noCache", "Tooltip", "Provider", "mx", "safeStringify", "React", "useEffect", "useState", "Loading", "data", "visible", "setVisible", "useState", "useEffect", "t", "setTimeout", "clearTimeout", "React", "div", "className", "mx", "h2", "pre", "safeStringify", "undefined"]
 }

package/dist/lib/node-esm/{chunk-2NHEX4AD.mjs → chunk-ZNBLTSHI.mjs}

@@ -1,8 +1,34 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
+// src/components/DensityProvider/DensityProvider.tsx
+import React, { createContext } from "react";
+var DensityContext = /* @__PURE__ */ createContext({
+  density: "fine"
+});
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React.createElement(DensityContext.Provider, {
+  value: {
+    density
+  }
+}, children);
+
+// src/components/ElevationProvider/ElevationProvider.tsx
+import React2, { createContext as createContext2 } from "react";
+var ElevationContext = /* @__PURE__ */ createContext2({
+  elevation: "base"
+});
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React2.createElement(ElevationContext.Provider, {
+  value: {
+    elevation
+  }
+}, children);
+
 // src/hooks/useElevationContext.ts
 import { useContext as useContext3 } from "react";
 
+// src/components/ThemeProvider/ThemeProvider.tsx
+import { createKeyborg } from "keyborg";
+import React4, { createContext as createContext4, useEffect as useEffect2, useMemo } from "react";
+
 // src/hooks/useThemeContext.ts
 import { useContext } from "react";
 import { raise } from "@dxos/debug";
@@ -34,7 +60,7 @@ var useSafeArea = () => {
 // src/components/ThemeProvider/TranslationsProvider.tsx
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { Suspense, createContext, useContext as useContext2, useEffect, useState as useState2 } from "react";
+import React3, { Suspense, createContext as createContext3, useContext as useContext2, useEffect, useState as useState2 } from "react";
 import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
@@ -54,7 +80,7 @@ void i18Next.use(initReactI18next).init({
     escapeValue: false
   }
 });
-var TranslationsContext = /* @__PURE__ */ createContext({
+var TranslationsContext = /* @__PURE__ */ createContext3({
   appNs: initialNs,
   dtLocale: initialDtLocale
 });
@@ -83,16 +109,64 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
   }, [
     resourceExtensions
   ]);
-  return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
+  return /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
     value: {
       appNs: appNs ?? initialNs,
       dtLocale: dtLocale ?? initialDtLocale
     }
-  }, /* @__PURE__ */ React.createElement(Suspense, {
+  }, /* @__PURE__ */ React3.createElement(Suspense, {
     fallback
   }, loaded ? children : fallback));
 };
 
+// src/util/hasIosKeyboard.ts
+var hasIosKeyboard = () => {
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+var ThemeContext = /* @__PURE__ */ createContext4(void 0);
+var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, _styleProps, ..._options) => void 0, themeMode = "dark", rootDensity = "fine", ...rest }) => {
+  useEffect2(() => {
+    if (document.defaultView) {
+      const kb = createKeyborg(document.defaultView);
+      kb.subscribe(handleInputModalityChange);
+      return () => kb.unsubscribe(handleInputModalityChange);
+    }
+  }, []);
+  const safeAreaPadding = useSafeArea();
+  const contextValue = useMemo(() => ({
+    tx,
+    themeMode,
+    hasIosKeyboard: hasIosKeyboard(),
+    safeAreaPadding,
+    ...rest
+  }), [
+    tx,
+    themeMode,
+    safeAreaPadding,
+    rest
+  ]);
+  return /* @__PURE__ */ React4.createElement(ThemeContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React4.createElement(TranslationsProvider, {
+    fallback,
+    resourceExtensions,
+    appNs
+  }, /* @__PURE__ */ React4.createElement(ElevationProvider, {
+    elevation: "base"
+  }, /* @__PURE__ */ React4.createElement(DensityProvider, {
+    density: rootDensity
+  }, children))));
+};
+var handleInputModalityChange = (isUsingKeyboard) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute("data-w-keyboard", "true");
+  } else {
+    document.body.removeAttribute("data-w-keyboard");
+  }
+};
+
 // src/components/Tooltip/Tooltip.tsx
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
@@ -107,7 +181,7 @@ import { Primitive } from "@radix-ui/react-primitive";
 import { Slottable } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
-import React2, { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
+import React5, { forwardRef, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -121,7 +195,7 @@ var TooltipProvider = (props) => {
   const isOpenDelayedRef = useRef(true);
   const isPointerInTransitRef = useRef(false);
   const skipDelayTimerRef = useRef(0);
-  useEffect2(() => {
+  useEffect3(() => {
     const skipDelayTimer = skipDelayTimerRef.current;
     return () => window.clearTimeout(skipDelayTimer);
   }, []);
@@ -158,7 +232,7 @@ var TooltipProvider = (props) => {
     defaultProp: defaultOpen,
     onChange: handleOpenChange
   });
-  const stateAttribute = useMemo(() => {
+  const stateAttribute = useMemo2(() => {
     return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
   }, [
     open
@@ -189,7 +263,7 @@ var TooltipProvider = (props) => {
     delayDuration,
     setOpen
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (openTimerRef.current) {
         window.clearTimeout(openTimerRef.current);
@@ -199,7 +273,7 @@ var TooltipProvider = (props) => {
   }, []);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
-  return /* @__PURE__ */ React2.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React2.createElement(TooltipContextProvider, {
+  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React5.createElement(TooltipContextProvider, {
     scope: __scopeTooltip,
     contentId,
     open,
@@ -235,21 +309,21 @@ var TooltipProvider = (props) => {
     onPointerInTransitChange: useCallback2((inTransit) => {
       isPointerInTransitRef.current = inTransit;
     }, [])
-  }, /* @__PURE__ */ React2.createElement(TooltipContent, {
+  }, /* @__PURE__ */ React5.createElement(TooltipContent, {
     side,
-    className: tx("tooltip.content", "tooltip", {
+    className: tx("tooltip.content", {
       elevation
     })
-  }, content, /* @__PURE__ */ React2.createElement(TooltipArrow, {
-    className: tx("tooltip.arrow", "tooltip__arrow")
-  })), /* @__PURE__ */ React2.createElement(TooltipVirtualTrigger, {
+  }, content, /* @__PURE__ */ React5.createElement(TooltipArrow, {
+    className: tx("tooltip.arrow")
+  })), /* @__PURE__ */ React5.createElement(TooltipVirtualTrigger, {
     virtualRef: triggerRef
   }), children));
 };
 TooltipProvider.displayName = TOOLTIP_NAME;
 var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
   const popperScope = usePopperScope(__scopeTooltip);
-  return /* @__PURE__ */ React2.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React5.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope,
     virtualRef
@@ -272,12 +346,12 @@ var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const isPointerDownRef = useRef(false);
   const hasPointerMoveOpenedRef = useRef(false);
   const handlePointerUp = useCallback2(() => isPointerDownRef.current = false, []);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => document.removeEventListener("pointerup", handlePointerUp);
   }, [
     handlePointerUp
   ]);
-  return /* @__PURE__ */ React2.createElement(Primitive.button, {
+  return /* @__PURE__ */ React5.createElement(Primitive.button, {
     // We purposefully avoid adding `type=button` here because tooltip triggers are also
     // commonly anchors and the anchor `type` attribute signifies MIME type.
     "aria-describedby": context.open ? context.contentId : void 0,
@@ -326,12 +400,12 @@ var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
 var TooltipPortal = (props) => {
   const { __scopeTooltip, forceMount, children, container } = props;
   const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
-  return /* @__PURE__ */ React2.createElement(PortalProvider, {
+  return /* @__PURE__ */ React5.createElement(PortalProvider, {
     scope: __scopeTooltip,
     forceMount
-  }, /* @__PURE__ */ React2.createElement(Presence, {
+  }, /* @__PURE__ */ React5.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React2.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React5.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
@@ -342,13 +416,13 @@ var TooltipContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
   const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
   const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
-  return /* @__PURE__ */ React2.createElement(Presence, {
+  return /* @__PURE__ */ React5.createElement(Presence, {
     present: forceMount || context.open
-  }, context.disableHoverableContent ? /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
+  }, context.disableHoverableContent ? /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
     side,
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React2.createElement(TooltipContentHoverable, {
+  }) : /* @__PURE__ */ React5.createElement(TooltipContentHoverable, {
     side,
     ...contentProps,
     ref: forwardedRef
@@ -386,12 +460,12 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
   }, [
     onPointerInTransitChange
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => handleRemoveGraceArea();
   }, [
     handleRemoveGraceArea
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (trigger && content) {
       const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
       const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
@@ -408,7 +482,7 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
     handleCreateGraceArea,
     handleRemoveGraceArea
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (pointerGraceArea) {
       const handleTrackPointerGrace = (event) => {
         const target = event.target;
@@ -435,7 +509,7 @@ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) =
     onClose,
     handleRemoveGraceArea
   ]);
-  return /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
+  return /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
     ...props,
     ref: composedRefs
   });
@@ -448,13 +522,13 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
   const popperScope = usePopperScope(__scopeTooltip);
   const { onClose } = context;
-  useEffect2(() => {
+  useEffect3(() => {
     document.addEventListener(TOOLTIP_OPEN, onClose);
     return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
   }, [
     onClose
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (context.trigger) {
       const handleScroll = (event) => {
         const target = event.target;
@@ -473,14 +547,14 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     context.trigger,
     onClose
   ]);
-  return /* @__PURE__ */ React2.createElement(DismissableLayer, {
+  return /* @__PURE__ */ React5.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents: false,
     onEscapeKeyDown,
     onPointerDownOutside,
     onFocusOutside: (event) => event.preventDefault(),
     onDismiss: onClose
-  }, /* @__PURE__ */ React2.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React5.createElement(PopperPrimitive.Content, {
     "data-state": context.stateAttribute,
     ...popperScope,
     ...contentProps,
@@ -496,10 +570,10 @@ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
       }
     }
-  }, /* @__PURE__ */ React2.createElement(Slottable, null, children), /* @__PURE__ */ React2.createElement(VisuallyHiddenContentContextProvider, {
+  }, /* @__PURE__ */ React5.createElement(Slottable, null, children), /* @__PURE__ */ React5.createElement(VisuallyHiddenContentContextProvider, {
     scope: __scopeTooltip,
     isInside: true
-  }, /* @__PURE__ */ React2.createElement(VisuallyHiddenPrimitive.Root, {
+  }, /* @__PURE__ */ React5.createElement(VisuallyHiddenPrimitive.Root, {
     id: context.contentId,
     role: "tooltip"
   }, ariaLabel || children))));
@@ -510,7 +584,7 @@ var TooltipArrow = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { __scopeTooltip, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeTooltip);
   const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
-  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React2.createElement(PopperPrimitive.Arrow, {
+  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React5.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     ref: forwardedRef
@@ -675,80 +749,6 @@ var Tooltip = {
   Trigger: TooltipTrigger
 };
 
-// src/components/ThemeProvider/ThemeProvider.tsx
-import { createKeyborg } from "keyborg";
-import React5, { createContext as createContext4, useEffect as useEffect3, useMemo as useMemo2 } from "react";
-
-// src/util/hasIosKeyboard.ts
-var hasIosKeyboard = () => {
-  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
-};
-
-// src/components/DensityProvider/DensityProvider.tsx
-import React3, { createContext as createContext2 } from "react";
-var DensityContext = /* @__PURE__ */ createContext2({
-  density: "fine"
-});
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React3.createElement(DensityContext.Provider, {
-  value: {
-    density
-  }
-}, children);
-
-// src/components/ElevationProvider/ElevationProvider.tsx
-import React4, { createContext as createContext3 } from "react";
-var ElevationContext = /* @__PURE__ */ createContext3({
-  elevation: "base"
-});
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React4.createElement(ElevationContext.Provider, {
-  value: {
-    elevation
-  }
-}, children);
-
-// src/components/ThemeProvider/ThemeProvider.tsx
-var ThemeContext = /* @__PURE__ */ createContext4(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
-  useEffect3(() => {
-    if (document.defaultView) {
-      const kb = createKeyborg(document.defaultView);
-      kb.subscribe(handleInputModalityChange);
-      return () => kb.unsubscribe(handleInputModalityChange);
-    }
-  }, []);
-  const safeAreaPadding = useSafeArea();
-  const contextValue = useMemo2(() => ({
-    tx,
-    themeMode,
-    hasIosKeyboard: hasIosKeyboard(),
-    safeAreaPadding,
-    ...rest
-  }), [
-    tx,
-    themeMode,
-    safeAreaPadding,
-    rest
-  ]);
-  return /* @__PURE__ */ React5.createElement(ThemeContext.Provider, {
-    value: contextValue
-  }, /* @__PURE__ */ React5.createElement(TranslationsProvider, {
-    fallback,
-    resourceExtensions,
-    appNs
-  }, /* @__PURE__ */ React5.createElement(ElevationProvider, {
-    elevation: "base"
-  }, /* @__PURE__ */ React5.createElement(DensityProvider, {
-    density: rootDensity
-  }, children))));
-};
-var handleInputModalityChange = (isUsingKeyboard) => {
-  if (isUsingKeyboard) {
-    document.body.setAttribute("data-is-keyboard", "true");
-  } else {
-    document.body.removeAttribute("data-is-keyboard");
-  }
-};
-
 // src/hooks/useElevationContext.ts
 var useElevationContext = (propsElevation) => {
   const { elevation } = useContext3(ElevationContext);
@@ -756,21 +756,21 @@ var useElevationContext = (propsElevation) => {
 };
 
 export {
+  DensityContext,
+  DensityProvider,
+  ElevationContext,
+  ElevationProvider,
   useElevationContext,
   useThemeContext,
   initialSafeArea,
   useSafeArea,
   TranslationsContext,
   useTranslation,
-  createTooltipScope,
-  useTooltipContext,
-  Tooltip,
   hasIosKeyboard,
-  DensityContext,
-  DensityProvider,
-  ElevationContext,
-  ElevationProvider,
   ThemeContext,
-  ThemeProvider
+  ThemeProvider,
+  createTooltipScope,
+  useTooltipContext,
+  Tooltip
 };
-//# sourceMappingURL=chunk-2NHEX4AD.mjs.map
+//# sourceMappingURL=chunk-ZNBLTSHI.mjs.map