@dxos/react-ui 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/dist/types/src/hooks/useIconHref.d.ts

@@ -0,0 +1,2 @@
+export declare const useIconHref: (icon?: string) => string | undefined;
+//# sourceMappingURL=useIconHref.d.ts.map

package/dist/types/src/hooks/useIconHref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconHref.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useIconHref.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,UAAW,MAAM,uBAIxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.1-staging.391c573",
+  "version": "0.8.1-staging.9eaf14f",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,6 +26,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
+    "@lit/react": "^1.0.5",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -61,13 +62,14 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.1-staging.391c573",
-    "@dxos/log": "0.8.1-staging.391c573",
-    "@dxos/react-hooks": "0.8.1-staging.391c573",
-    "@dxos/react-list": "0.8.1-staging.391c573",
-    "@dxos/react-input": "0.8.1-staging.391c573",
-    "@dxos/react-ui-types": "0.8.1-staging.391c573",
-    "@dxos/util": "0.8.1-staging.391c573"
+    "@dxos/debug": "0.8.1-staging.9eaf14f",
+    "@dxos/log": "0.8.1-staging.9eaf14f",
+    "@dxos/lit-ui": "0.8.1-staging.9eaf14f",
+    "@dxos/react-input": "0.8.1-staging.9eaf14f",
+    "@dxos/react-list": "0.8.1-staging.9eaf14f",
+    "@dxos/react-ui-types": "0.8.1-staging.9eaf14f",
+    "@dxos/react-hooks": "0.8.1-staging.9eaf14f",
+    "@dxos/util": "0.8.1-staging.9eaf14f"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -79,15 +81,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.1-staging.391c573",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
-    "@dxos/util": "0.8.1-staging.391c573"
+    "@dxos/random": "0.8.1-staging.9eaf14f",
+    "@dxos/util": "0.8.1-staging.9eaf14f",
+    "@dxos/react-ui-theme": "0.8.1-staging.9eaf14f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573"
+    "@dxos/react-ui-theme": "0.8.1-staging.9eaf14f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -3,13 +3,13 @@
 //
 
 import '@dxos-theme';
-
 import React, { type PropsWithChildren } from 'react';
 
+import { type HuePalette } from '@dxos/react-ui-theme';
 import { type Size } from '@dxos/react-ui-types';
 import { hexToFallback } from '@dxos/util';
 
-import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation, type AvatarRootProps } from './Avatar';
+import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
 import { withTheme } from '../../testing';
 
 type StorybookAvatarProps = {
@@ -22,7 +22,7 @@ type StorybookAvatarProps = {
   variant?: AvatarVariant;
   animation?: AvatarAnimation;
   size?: Size;
-  hue?: AvatarRootProps['hue'];
+  hue?: HuePalette;
 };
 
 const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
@@ -40,11 +40,10 @@ const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
   const { emoji, hue } = hexToFallback(id);
   return (
     <div className='flex flex-row gap-3 align-middle items-center'>
-      <Avatar.Root {...{ size, variant, status, animation, hue: props.hue || hue }}>
-        <Avatar.Frame>
-          {!imgSrc && (fallbackText || emoji) && <Avatar.Fallback text={fallbackText || emoji} />}
-          {imgSrc && <Avatar.Image href={imgSrc} />}
-        </Avatar.Frame>
+      <Avatar.Root>
+        <Avatar.Content
+          {...{ size, variant, status, animation, imgSrc, hue: props.hue || hue, fallback: fallbackText || emoji }}
+        />
         <div>
           <Avatar.Label classNames='block'>{label}</Avatar.Label>
           <Avatar.Description classNames='block'>

package/src/components/Avatars/Avatar.tsx

@@ -2,161 +2,58 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  Root as AvatarRootPrimitive,
-  type AvatarProps as AvatarRootPrimitiveProps,
-  Fallback as AvatarFallbackPrimitive,
-  type AvatarImageProps as AvatarImagePrimitiveProps,
-} from '@radix-ui/react-avatar';
+import '@dxos/lit-ui/dx-avatar.pcss';
+
+import { createComponent } from '@lit/react';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
+import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
 
+import { type AvatarVariant, type AvatarStatus, type AvatarAnimation, DxAvatar as NaturalDxAvatar } from '@dxos/lit-ui';
 import { useId } from '@dxos/react-hooks';
-import { type Size } from '@dxos/react-ui-types';
+import { mx } from '@dxos/react-ui-theme';
 
-import { useThemeContext } from '../../hooks';
+import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { Icon } from '../Icon';
-
-type AvatarVariant = 'square' | 'circle';
-type AvatarStatus = 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
-type AvatarAnimation = 'pulse' | 'none';
 
 export type AvatarRootProps = PropsWithChildren<Partial<AvatarContextValue>>;
 
 type AvatarContextValue = {
   labelId: string;
   descriptionId: string;
-  maskId: string;
-  size: Size;
-  variant: AvatarVariant;
-  status?: AvatarStatus;
-  animation?: AvatarAnimation;
-  inGroup?: boolean;
-  hue?: string;
 };
 
 const AVATAR_NAME = 'Avatar';
 const [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);
 
-const AvatarRoot = ({
-  size = 10,
-  variant = 'circle',
-  status,
-  animation,
-  children,
-  labelId: propsLabelId,
-  descriptionId: propsDescriptionId,
-  maskId: propsMaskId,
-  inGroup,
-  hue,
-}: AvatarRootProps) => {
+const AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }: AvatarRootProps) => {
   const labelId = useId('avatar__label', propsLabelId);
   const descriptionId = useId('avatar__description', propsDescriptionId);
-  const maskId = useId('avatar__mask', propsMaskId);
-  return (
-    <AvatarProvider {...{ labelId, descriptionId, maskId, size, variant, status, animation, inGroup, hue }}>
-      {children}
-    </AvatarProvider>
-  );
+  return <AvatarProvider {...{ labelId, descriptionId }}>{children}</AvatarProvider>;
 };
 
-type AvatarFrameProps = ThemedClassName<AvatarRootPrimitiveProps>;
-
-const rx = '0.25rem';
+const DxAvatar = createComponent({
+  tagName: 'dx-avatar',
+  elementClass: NaturalDxAvatar,
+  react: React,
+});
 
-const AvatarFrame = forwardRef<HTMLSpanElement, AvatarFrameProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
-    const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } =
-      useAvatarContext('AvatarFrame');
+type AvatarContentProps = ThemedClassName<Omit<ComponentProps<typeof DxAvatar>, 'children'>>;
 
-    const { tx } = useThemeContext();
-    const numericSize = size === 'px' ? 1 : Number(size);
-    const sizePx = numericSize * 4;
-    const ringWidth = status ? (numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1) : 0;
-    const ringGap = status ? (numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0) : 0;
-    const r = sizePx / 2 - ringGap - ringWidth;
-    return (
-      <AvatarRootPrimitive
-        role='img'
-        {...props}
-        className={tx('avatar.root', 'avatar', { size, variant, inGroup }, classNames)}
-        ref={forwardedRef}
-        {...(!inGroup && {
-          'aria-labelledby': labelId,
-          'aria-describedby': descriptionId,
-        })}
-      >
-        <svg
-          viewBox={`0 0 ${sizePx} ${sizePx}`}
-          width={sizePx}
-          height={sizePx}
-          className={tx('avatar.frame', 'avatar__frame', { variant })}
-        >
-          <defs>
-            <mask id={maskId}>
-              {variant === 'circle' ? (
-                <circle fill='white' cx='50%' cy='50%' r={r} />
-              ) : (
-                <rect
-                  fill='white'
-                  width={2 * r}
-                  height={2 * r}
-                  x={ringGap + ringWidth}
-                  y={ringGap + ringWidth}
-                  rx={rx}
-                />
-              )}
-            </mask>
-          </defs>
-          {variant === 'circle' ? (
-            <circle cx='50%' cy='50%' r={r} fill={hue ? `var(--dx-${hue}Fill)` : 'var(--surface-bg)'} />
-          ) : (
-            <rect
-              fill={hue ? `var(--dx-${hue}Fill)` : 'var(--surface-bg)'}
-              x={ringGap + ringWidth}
-              y={ringGap + ringWidth}
-              width={2 * r}
-              height={2 * r}
-              rx={rx}
-            />
-          )}
-          {children}
-          {/* {variant === 'circle' ? (
-            <circle
-              className='avatarFrameStroke fill-transparent stroke-[var(--surface-text)]'
-              strokeWidth={strokeWidth}
-              fill='none'
-              opacity={0.1}
-              cx={'50%'}
-              cy={'50%'}
-              r={r - 0.5 * strokeWidth}
-            />
-          ) : (
-            <rect
-              className='avatarFrameStroke fill-transparent stroke-[var(--surface-text)]'
-              strokeWidth={strokeWidth}
-              opacity={0.1}
-              fill='none'
-              x={ringGap + ringWidth}
-              y={ringGap + ringWidth}
-              width={2 * r}
-              height={2 * r}
-              rx={rx}
-            />
-          )} */}
-        </svg>
-        <span
-          role='none'
-          className={tx('avatar.ring', 'avatar__ring', { size, variant, status, animation })}
-          style={{ borderWidth: ringWidth + 'px' }}
-        />
-      </AvatarRootPrimitive>
-    );
-  },
-);
+const AvatarContent = ({ icon, classNames, ...props }: AvatarContentProps) => {
+  const href = useIconHref(icon);
+  const { labelId, descriptionId } = useAvatarContext('AvatarContent');
+  return (
+    <DxAvatar
+      {...props}
+      icon={href}
+      labelId={labelId}
+      aria-describedby={descriptionId}
+      rootClassName={mx(classNames)}
+    />
+  );
+};
 
 type AvatarLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'>> & {
   asChild?: boolean;
@@ -200,103 +97,9 @@ const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
   },
 );
 
-type AvatarMaskedImageProps = ComponentPropsWithRef<'image'>;
-
-const AvatarMaskedImage = forwardRef<SVGImageElement, AvatarMaskedImageProps>((props, forwardedRef) => {
-  const { maskId } = useAvatarContext('AvatarFallback');
-  return (
-    <image
-      width='100%'
-      height='100%'
-      {...props}
-      mask={`url(#${maskId})`}
-      ref={forwardedRef}
-      preserveAspectRatio='xMidYMid slice'
-    />
-  );
-});
-
-type AvatarMaskedTextProps = PropsWithChildren<{ large?: boolean }>;
-
-const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
-  const { maskId, size } = useAvatarContext('AvatarFallback');
-  const { large } = props;
-  const fontScale = (large ? 4 : 3) * (1 / 1.612);
-  const { tx } = useThemeContext();
-  return (
-    <text
-      x='50%'
-      y='50%'
-      className={tx('avatar.fallbackText', 'avatar__fallback-text')}
-      textAnchor='middle'
-      alignmentBaseline='central'
-      fontSize={size === 'px' ? '200%' : size * fontScale}
-      mask={`url(#${maskId})`}
-    >
-      {props.children}
-    </text>
-  );
-};
-
-type AvatarImageProps = ComponentPropsWithRef<'image'> & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
-
-const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
-  ({ onLoadingStatusChange, ...props }, forwardedRef) => {
-    const { size } = useAvatarContext('AvatarImage');
-    const pxSize = size === 'px' ? 1 : size * 4;
-    if (pxSize <= 20) {
-      return null;
-    }
-    return (
-      <AvatarFallbackPrimitive asChild>
-        <AvatarMaskedImage {...props} ref={forwardedRef} />
-      </AvatarFallbackPrimitive>
-    );
-  },
-);
-
-type AvatarIconProps = {
-  icon: string;
-} & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
-
-const AvatarIcon = forwardRef<SVGSVGElement, AvatarIconProps>(({ onLoadingStatusChange, ...props }, forwardedRef) => {
-  const { size } = useAvatarContext('AvatarIcon');
-  const pxSize = size === 'px' ? 1 : size * 4;
-  if (pxSize <= 20) {
-    return null;
-  }
-  return (
-    <AvatarFallbackPrimitive asChild>
-      <Icon {...props} ref={forwardedRef} />
-    </AvatarFallbackPrimitive>
-  );
-});
-
-type AvatarFallbackProps = ComponentPropsWithRef<'image'> & {
-  delayMs?: number;
-  text?: string;
-};
-
-const AvatarFallback = forwardRef<SVGImageElement, AvatarFallbackProps>(({ delayMs, text, ...props }, forwardedRef) => {
-  const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
-  const { size } = useAvatarContext('AvatarFallback');
-  const numericSize = size === 'px' ? 1 : Number(size);
-  return (
-    <AvatarFallbackPrimitive delayMs={delayMs} asChild>
-      <>
-        {numericSize >= 6 && <AvatarMaskedImage {...props} ref={forwardedRef} />}
-        {text && <AvatarMaskedText large={!isTextOnly}>{text.toLocaleUpperCase()}</AvatarMaskedText>}
-      </>
-    </AvatarFallbackPrimitive>
-  );
-});
-
 export const Avatar = {
   Root: AvatarRoot,
-  Frame: AvatarFrame,
-  Image: AvatarImage,
-  Icon: AvatarIcon,
-  Fallback: AvatarFallback,
+  Content: AvatarContent,
   Label: AvatarLabel,
   Description: AvatarDescription,
 };
@@ -307,9 +110,7 @@ export type {
   AvatarStatus,
   AvatarVariant,
   AvatarAnimation,
-  AvatarFrameProps,
-  AvatarImageProps,
-  AvatarFallbackProps,
+  AvatarContentProps,
   AvatarLabelProps,
   AvatarDescriptionProps,
 };

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -3,49 +3,42 @@
 //
 
 import '@dxos-theme';
-
 import React from 'react';
 
+import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
 import { Avatar } from './Avatar';
-import { AvatarGroup, AvatarGroupItem } from './AvatarGroup';
 import { withTheme } from '../../testing';
 
-const items = [
-  '[&_.avatarFrameFill]:fill-lime-500',
-  '[&_.avatarFrameFill]:fill-teal-500',
-  '[&_.avatarFrameFill]:fill-purple-500',
-  '[&_.avatarFrameFill]:fill-pink-500',
-];
+const hues = ['lime', 'teal', 'purple', 'pink'];
 
 const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
   const emoji = toEmoji(n);
   return (
-    <AvatarGroupItem.Root>
-      <Avatar.Frame classNames={items[n]}>
-        <Avatar.Fallback text={emoji} />
-      </Avatar.Frame>
-    </AvatarGroupItem.Root>
+    <Avatar.Root>
+      <Avatar.Content fallback={emoji} hue={hues[n]} size={8} variant='circle' />
+    </Avatar.Root>
   );
 };
 
 const StorybookAvatarGroup = () => {
+  const labelId = useId('sb-avatar-group');
   return (
-    <AvatarGroup.Root size={8} variant='circle'>
+    <div className='dx-avatar-group' aria-labelledby={labelId}>
       {[0, 1, 2, 3].map((n) => (
         <StorybookAvatarGroupItem key={n} n={n} />
       ))}
-      <AvatarGroup.Label srOnly>
-        <span>23</span>
-      </AvatarGroup.Label>
-    </AvatarGroup.Root>
+      <span className='sr-only' id={labelId}>
+        23
+      </span>
+    </div>
   );
 };
 
 export default {
   title: 'ui/react-ui-core/AvatarGroup',
-  component: AvatarGroup,
+  component: StorybookAvatarGroup,
   render: StorybookAvatarGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/Avatars/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './Avatar';
-export * from './AvatarGroup';

package/src/components/Icon/Icon.tsx

@@ -7,11 +7,9 @@ import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Size } from '@dxos/react-ui-types';
 
-import { useThemeContext } from '../../hooks';
+import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-const ICONS_URL = '/icons.svg';
-
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
@@ -19,11 +17,11 @@ export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.s
 
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
-    const { tx, noCache } = useThemeContext();
-    const url = noCache ? `${ICONS_URL}?nocache=${new Date().getMinutes()}` : ICONS_URL;
+    const { tx } = useThemeContext();
+    const href = useIconHref(icon);
     return (
       <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
-        <use href={`${url}#${icon}`} />
+        <use href={href} />
       </svg>
     );
   }),

package/src/components/Input/Input.tsx

@@ -28,6 +28,7 @@ import {
   Validation as ValidationPrimitive,
   type ValidationProps as ValidationPrimitiveProps,
 } from '@dxos/react-input';
+import { mx } from '@dxos/react-ui-theme';
 import { type Density, type Elevation, type ClassNameValue, type Size } from '@dxos/react-ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
@@ -307,7 +308,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     return (
       <input
         type='checkbox'
-        className='dx-checkbox--switch dx-focus-ring'
+        className={mx('dx-checkbox--switch dx-focus-ring', classNames)}
         checked={checked}
         onChange={(event) => {
           onCheckedChange(event.target.checked);

package/src/hooks/index.ts

@@ -4,6 +4,7 @@
 
 export * from './useDensityContext';
 export * from './useElevationContext';
+export * from './useIconHref';
 export * from './useSafeArea';
 export * from './useTranslationsContext';
 export * from './useThemeContext';

package/src/hooks/useIconHref.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useThemeContext } from './useThemeContext';
+
+const ICONS_URL = '/icons.svg';
+
+export const useIconHref = (icon?: string) => {
+  const { noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${new Date().getMinutes()}` : ICONS_URL;
+  return icon ? `${url}#${icon}` : undefined;
+};

package/dist/types/src/components/Avatars/AvatarGroup.d.ts

@@ -1,21 +0,0 @@
-import React, { type ComponentPropsWithRef } from 'react';
-import { type AvatarRootProps } from './Avatar';
-import { type ThemedClassName } from '../../util';
-type AvatarGroupRootProps = Omit<AvatarRootProps, 'status' | 'maskId' | 'inGroup'> & ThemedClassName<ComponentPropsWithRef<'div'>>;
-type AvatarGroupItemRootProps = Omit<AvatarRootProps, 'labelId' | 'descriptionId' | 'inGroup'>;
-type AvatarGroupLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & {
-    srOnly?: boolean;
-};
-type AvatarGroupDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & {
-    srOnly?: boolean;
-};
-export declare const AvatarGroup: {
-    Root: React.ForwardRefExoticComponent<Omit<AvatarGroupRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<AvatarGroupLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<AvatarGroupDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-};
-export declare const AvatarGroupItem: {
-    Root: ({ maskId, size, variant, status, children, ...rest }: AvatarGroupItemRootProps) => React.JSX.Element;
-};
-export type { AvatarGroupRootProps, AvatarGroupItemRootProps, AvatarGroupLabelProps, AvatarGroupDescriptionProps };
-//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/types/src/components/Avatars/AvatarGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatars/AvatarGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAItE,OAAO,EAAU,KAAK,eAAe,EAAoB,MAAM,UAAU,CAAC;AAE1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,GAChF,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;AAiChD,KAAK,wBAAwB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC,CAAC;AA2B/F,KAAK,qBAAqB,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkB/G,KAAK,2BAA2B,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkBrH,eAAO,MAAM,WAAW;;;;CAA0F,CAAC;AACnH,eAAO,MAAM,eAAe;iEA9DuD,wBAAwB;CA8D/C,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}