@tamagui/radio-headless 1.0.1

package/dist/jsx/useRadioGroup.native.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var useRadioGroup_exports = {};
+__export(useRadioGroup_exports, {
+  useRadioGroup: () => useRadioGroup,
+  useRadioGroupItem: () => useRadioGroupItem,
+  useRadioGroupItemIndicator: () => useRadioGroupItemIndicator
+});
+module.exports = __toCommonJS(useRadioGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_compose_refs = require("@tamagui/compose-refs"),
+  import_constants = require("@tamagui/constants"),
+  import_focusable = require("@tamagui/focusable"),
+  import_helpers = require("@tamagui/helpers"),
+  import_label = require("@tamagui/label"),
+  import_use_controllable_state = require("@tamagui/use-controllable-state"),
+  import_react = require("react"),
+  import_BubbleInput = require("./BubbleInput.native.js"),
+  import_utils = require("./utils.native.js");
+function useRadioGroup(params) {
+  var {
+      value: valueProp,
+      onValueChange,
+      defaultValue,
+      required,
+      disabled,
+      name,
+      native,
+      accentColor,
+      orientation,
+      ref
+    } = params,
+    [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+  return {
+    providerValue: {
+      value,
+      onChange: setValue,
+      required,
+      disabled,
+      name,
+      native,
+      accentColor
+    },
+    frameAttrs: {
+      role: "radiogroup",
+      "aria-orientation": orientation,
+      "data-disabled": disabled ? "" : void 0
+    },
+    rovingFocusGroupAttrs: {
+      orientation,
+      loop: !0
+    }
+  };
+}
+var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"],
+  useRadioGroupItem = function (params) {
+    var {
+        radioGroupContext,
+        value,
+        labelledBy: ariaLabelledby,
+        disabled: itemDisabled,
+        ref: refProp,
+        id,
+        onPress,
+        onKeyDown,
+        onFocus
+      } = params,
+      {
+        value: groupValue,
+        disabled,
+        required,
+        onChange,
+        name,
+        native,
+        accentColor
+      } = (0, import_react.useContext)(radioGroupContext),
+      [button, setButton] = (0, import_react.useState)(null),
+      hasConsumerStoppedPropagationRef = (0, import_react.useRef)(!1),
+      ref = (0, import_react.useRef)(null),
+      composedRefs = (0, import_compose_refs.useComposedRefs)(refProp, function (node) {
+        return setButton(node);
+      }, ref),
+      isArrowKeyPressedRef = (0, import_react.useRef)(!1),
+      isFormControl = import_constants.isWeb ? button ? !!button.closest("form") : !0 : !1,
+      checked = groupValue === value,
+      labelId = (0, import_label.useLabelContext)(button),
+      labelledBy = ariaLabelledby || labelId;
+    (0, import_react.useEffect)(function () {
+      if (import_constants.isWeb) {
+        var handleKeyDown = function (event) {
+            ARROW_KEYS.includes(event.key) && (isArrowKeyPressedRef.current = !0);
+          },
+          handleKeyUp = function () {
+            isArrowKeyPressedRef.current = !1;
+          };
+        return document.addEventListener("keydown", handleKeyDown), document.addEventListener("keyup", handleKeyUp), function () {
+          document.removeEventListener("keydown", handleKeyDown), document.removeEventListener("keyup", handleKeyUp);
+        };
+      }
+    }, []), (0, import_react.useEffect)(function () {
+      if (id && !disabled) return (0, import_focusable.registerFocusable)(id, {
+        focusAndSelect: function () {
+          onChange?.(value);
+        },
+        focus: function () {}
+      });
+    }, [id, value, disabled]);
+    var isDisabled = disabled || itemDisabled;
+    return {
+      providerValue: {
+        checked
+      },
+      checked,
+      isFormControl,
+      bubbleInput: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BubbleInput.BubbleInput, {
+        isHidden: !native,
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name,
+        value,
+        checked,
+        required,
+        disabled: isDisabled,
+        ...(import_constants.isWeb && native && {
+          accentColor,
+          id
+        })
+      }),
+      native,
+      frameAttrs: {
+        "data-state": (0, import_utils.getState)(checked),
+        "data-disabled": isDisabled ? "" : void 0,
+        role: "radio",
+        "aria-labelledby": labelledBy,
+        "aria-checked": checked,
+        "aria-required": required,
+        disabled: isDisabled,
+        ref: composedRefs,
+        ...(import_constants.isWeb && {
+          type: "button",
+          value
+        }),
+        id,
+        onPress: (0, import_helpers.composeEventHandlers)(onPress, function (event) {
+          checked || onChange?.(value), isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
+        }),
+        ...(import_constants.isWeb && {
+          onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, function (event) {
+            (event.key === "Enter" || event.key === " ") && (checked || onChange?.(value));
+          }),
+          onFocus: (0, import_helpers.composeEventHandlers)(onFocus, function () {
+            if (isArrowKeyPressedRef.current) {
+              var _ref_current;
+              (_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.click();
+            }
+          })
+        })
+      },
+      rovingFocusGroupAttrs: {
+        asChild: "except-style",
+        focusable: !isDisabled,
+        active: checked
+      }
+    };
+  };
+function useRadioGroupItemIndicator(params) {
+  var {
+      radioGroupItemContext,
+      disabled,
+      ...rest
+    } = params,
+    {
+      checked
+    } = (0, import_react.useContext)(radioGroupItemContext);
+  return {
+    checked,
+    "data-state": (0, import_utils.getState)(checked),
+    "data-disabled": disabled ? "" : void 0,
+    ...rest
+  };
+}
+//# sourceMappingURL=useRadioGroup.native.js.map

package/dist/jsx/useRadioGroup.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","useRadioGroup_exports","useRadioGroup","useRadioGroupItem","useRadioGroupItemIndicator","module","exports","import_jsx_runtime","require","import_compose_refs","import_constants","import_focusable","import_helpers","import_label","import_use_controllable_state","import_react","import_BubbleInput","import_utils","params","valueProp","onValueChange","defaultValue","required","disabled","native","accentColor","orientation","ref","setValue","useControllableState","prop","defaultProp","onChange","providerValue","frameAttrs","role","rovingFocusGroupAttrs","loop","ARROW_KEYS","radioGroupContext","labelledBy","ariaLabelledby","itemDisabled","refProp","id","onPress","onKeyDown","onFocus","groupValue","useContext","button","setButton","useState","hasConsumerStoppedPropagationRef","useRef","composedRefs","useComposedRefs","node","isArrowKeyPressedRef","isFormControl","isWeb","closest","checked","labelId","useLabelContext","useEffect","handleKeyDown","event","includes","current","handleKeyUp","document","addEventListener","removeEventListener","registerFocusable","focusAndSelect","focus","isDisabled","bubbleInput","jsx","BubbleInput","isHidden","control","bubbles","getState","type","composeEventHandlers","isPropagationStopped","stopPropagation","_ref_current","click","asChild","focusable","active","radioGroupItemContext","rest"],"sources":["../../src/useRadioGroup.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/utils.js

@@ -0,0 +1,7 @@
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+export {
+  getState
+};
+//# sourceMappingURL=utils.js.map

package/dist/jsx/utils.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx"],
+  "mappings": "AAAO,SAAS,SAAS,SAAkB;AACzC,SAAO,UAAU,YAAY;AAC/B;",
+  "names": []
+}

package/dist/jsx/utils.mjs

@@ -0,0 +1,5 @@
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+export { getState };
+//# sourceMappingURL=utils.mjs.map

package/dist/jsx/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["getState","checked"],"sources":["../../src/utils.tsx"],"sourcesContent":[null],"mappings":"AAAO,SAASA,SAASC,OAAA,EAAkB;EACzC,OAAOA,OAAA,GAAU,YAAY;AAC/B","ignoreList":[]}

package/dist/jsx/utils.native.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  getState: () => getState
+});
+module.exports = __toCommonJS(utils_exports);
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+//# sourceMappingURL=utils.native.js.map

package/dist/jsx/utils.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor"],"sources":["../../src/utils.tsx"],"sourcesContent":[null],"mappings":"AAAO,YAAS;;AACd,IAAAA,SAAO,GAAAC,MAAU,CAAAC,cAAY;AAC/B,IAAAC,gBAAA,GAAAF,MAAA,CAAAG,wBAAA","ignoreList":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tamagui/radio-headless",
+  "version": "1.0.1",
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/compose-refs": "1.0.1",
+    "@tamagui/constants": "1.0.1",
+    "@tamagui/create-context": "1.0.1",
+    "@tamagui/focusable": "1.0.1",
+    "@tamagui/helpers": "1.0.1",
+    "@tamagui/label": "1.0.1",
+    "@tamagui/use-controllable-state": "1.0.1",
+    "@tamagui/use-previous": "1.0.1",
+    "@tamagui/web": "1.0.1"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.0.1",
+    "react": ">=19",
+    "react-native": "0.81.5"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx",
+  "removeSideEffects": "true"
+}

package/src/BubbleInput.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { usePrevious } from '@tamagui/use-previous'
+
+interface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {
+  checked: boolean
+  control: HTMLElement | null
+  bubbles: boolean
+  isHidden?: boolean
+  accentColor?: string
+}
+
+export const BubbleInput = (props: BubbleInputProps) => {
+  const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props
+  const ref = React.useRef<HTMLInputElement>(null)
+  const prevChecked = usePrevious(checked)
+
+  // Bubble checked change to parents (e.g form change event)
+  React.useEffect(() => {
+    const input = ref.current!
+    const inputProto = window.HTMLInputElement.prototype
+    const descriptor = Object.getOwnPropertyDescriptor(
+      inputProto,
+      'checked'
+    ) as PropertyDescriptor
+    const setChecked = descriptor.set
+    if (prevChecked !== checked && setChecked) {
+      const event = new Event('click', { bubbles })
+      setChecked.call(input, checked)
+      input.dispatchEvent(event)
+    }
+  }, [prevChecked, checked, bubbles])
+
+  return (
+    <input
+      type="radio"
+      defaultChecked={checked}
+      {...inputProps}
+      tabIndex={-1}
+      ref={ref}
+      aria-hidden={isHidden}
+      style={{
+        ...(isHidden
+          ? {
+              // ...controlSize,
+              position: 'absolute',
+              pointerEvents: 'none',
+              opacity: 0,
+              margin: 0,
+            }
+          : {
+              appearance: 'auto',
+              accentColor,
+            }),
+
+        ...props.style,
+      }}
+    />
+  )
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useRadioGroup'
+export * from './utils'

package/src/useRadioGroup.tsx

@@ -0,0 +1,260 @@
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { isWeb } from '@tamagui/constants'
+import { registerFocusable } from '@tamagui/focusable'
+import { composeEventHandlers } from '@tamagui/helpers'
+import { useLabelContext } from '@tamagui/label'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import type { ViewProps } from '@tamagui/web'
+import type { ReactElement } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
+import type { GestureResponderEvent } from 'react-native'
+import { BubbleInput } from './BubbleInput'
+import { getState } from './utils'
+
+interface UseRadioGroupParams {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  required?: boolean
+  disabled?: boolean
+  name?: string
+  native?: boolean
+  accentColor?: string
+  orientation: 'horizontal' | 'vertical'
+  ref?: React.Ref<ReactElement>
+}
+export function useRadioGroup(params: UseRadioGroupParams) {
+  const {
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    required,
+    disabled,
+    name,
+    native,
+    accentColor,
+    orientation,
+    ref,
+  } = params
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue!,
+    onChange: onValueChange,
+  })
+
+  return {
+    providerValue: {
+      value,
+      onChange: setValue,
+      required,
+      disabled,
+      name,
+      native,
+      accentColor,
+    },
+    frameAttrs: {
+      role: 'radiogroup' as any,
+      'aria-orientation': orientation,
+      'data-disabled': disabled ? '' : undefined,
+    },
+    rovingFocusGroupAttrs: {
+      orientation,
+      loop: true,
+    },
+  }
+}
+
+interface UseRadioItemParams {
+  radioGroupContext: React.Context<RadioGroupContextValue>
+  value: string
+  id?: string
+  labelledBy?: string
+  disabled?: boolean
+  ref?: any
+  onPress?: ViewProps['onPress']
+  onKeyDown?: ViewProps['onKeyDown']
+  onFocus?: ViewProps['onFocus']
+}
+
+export type RadioGroupContextValue = {
+  value?: string
+  disabled?: boolean
+  required?: boolean
+  onChange?: (value: string) => void
+  name?: string
+  native?: boolean
+  accentColor?: string
+}
+
+const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+
+export const useRadioGroupItem = (params: UseRadioItemParams) => {
+  const {
+    radioGroupContext,
+    value,
+    labelledBy: ariaLabelledby,
+    disabled: itemDisabled,
+    ref: refProp,
+    id,
+    onPress,
+    onKeyDown,
+    onFocus,
+  } = params
+  const {
+    value: groupValue,
+    disabled,
+    required,
+    onChange,
+    name,
+    native,
+    accentColor,
+  } = useContext(radioGroupContext)
+
+  const [button, setButton] = useState<HTMLButtonElement | null>(null)
+  const hasConsumerStoppedPropagationRef = useRef(false)
+  const ref = useRef<any>(null)
+  const composedRefs = useComposedRefs(refProp, (node) => setButton(node), ref)
+  const isArrowKeyPressedRef = useRef(false)
+
+  const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false
+
+  const checked = groupValue === value
+
+  const labelId = useLabelContext(button)
+  const labelledBy = ariaLabelledby || labelId
+
+  useEffect(() => {
+    if (isWeb) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (ARROW_KEYS.includes(event.key)) {
+          isArrowKeyPressedRef.current = true
+        }
+      }
+      const handleKeyUp = () => {
+        isArrowKeyPressedRef.current = false
+      }
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('keyup', handleKeyUp)
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
+        document.removeEventListener('keyup', handleKeyUp)
+      }
+    }
+  }, [])
+
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    useEffect(() => {
+      if (!id) return
+      if (disabled) return
+
+      return registerFocusable(id, {
+        focusAndSelect: () => {
+          onChange?.(value)
+        },
+        focus: () => {},
+      })
+    }, [id, value, disabled])
+  }
+
+  const isDisabled = disabled || itemDisabled
+
+  return {
+    providerValue: {
+      checked,
+    },
+    checked,
+    isFormControl,
+    bubbleInput: (
+      <BubbleInput
+        isHidden={!native}
+        control={button}
+        bubbles={!hasConsumerStoppedPropagationRef.current}
+        name={name}
+        value={value}
+        checked={checked}
+        required={required}
+        disabled={isDisabled}
+        {...(isWeb &&
+          native && {
+            accentColor,
+            id,
+          })}
+      />
+    ),
+    native,
+    frameAttrs: {
+      'data-state': getState(checked),
+      'data-disabled': isDisabled ? '' : undefined,
+      role: 'radio' as any,
+      'aria-labelledby': labelledBy,
+      'aria-checked': checked,
+      'aria-required': required,
+      disabled: isDisabled,
+      ref: composedRefs,
+      ...(isWeb && {
+        type: 'button',
+        value: value,
+      }),
+      id,
+      onPress: composeEventHandlers(onPress, (event: GestureResponderEvent) => {
+        if (!checked) {
+          onChange?.(value)
+        }
+
+        if (isFormControl) {
+          hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
+          // if radio is in a form, stop propagation from the button so that we only propagate
+          // one click event (from the input). We propagate changes from an input so that native
+          // form validation works and form events reflect radio updates.
+          if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
+        }
+      }),
+      ...(isWeb && {
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          // Allow Enter and Space to select the radio item
+          if (event.key === 'Enter' || event.key === ' ') {
+            if (!checked) {
+              onChange?.(value)
+            }
+          }
+        }),
+        onFocus: composeEventHandlers(onFocus, () => {
+          /**
+           * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys
+           * and we need to "check" it in that case. We click it to "check" it (instead
+           * of updating `context.value`) so that the radio change event fires.
+           */
+          if (isArrowKeyPressedRef.current) {
+            ;(ref.current as HTMLButtonElement)?.click()
+          }
+        }),
+      }),
+    },
+    rovingFocusGroupAttrs: {
+      asChild: 'except-style' as const,
+      focusable: !isDisabled,
+      active: checked,
+    },
+  }
+}
+
+export type RadioGroupItemContextValue = {
+  checked: boolean
+  disabled?: boolean
+}
+
+type UseRadioGroupItemIndicatorParams = {
+  radioGroupItemContext: React.Context<RadioGroupItemContextValue>
+  disabled?: boolean
+}
+export function useRadioGroupItemIndicator(params: UseRadioGroupItemIndicatorParams) {
+  const { radioGroupItemContext, disabled, ...rest } = params
+  const { checked } = useContext(radioGroupItemContext)
+
+  return {
+    checked,
+    'data-state': getState(checked),
+    'data-disabled': disabled ? '' : undefined,
+    ...rest,
+  }
+}

package/src/utils.tsx

@@ -0,0 +1,3 @@
+export function getState(checked: boolean) {
+  return checked ? 'checked' : 'unchecked'
+}

package/types/BubbleInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {
+    checked: boolean;
+    control: HTMLElement | null;
+    bubbles: boolean;
+    isHidden?: boolean;
+    accentColor?: string;
+}
+export declare const BubbleInput: (props: BubbleInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BubbleInput.d.ts.map

package/types/BubbleInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleInput.d.ts","sourceRoot":"","sources":["../src/BubbleInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACnF,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA+ClD,CAAA"}