@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.0b5b49f

package/dist/Selector/Selector.js

@@ -0,0 +1,570 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Selector.tsx
+ * @input Uses React, StyleX, usePopover, Icon
+ * @output Exports Selector component
+ * @position Core implementation; consumed by index.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Selector/Selector.doc.mjs
+ * - /packages/core/src/Selector/index.ts
+ * - /packages/cli/templates/blocks/components/Selector/ (showcase blocks)
+ */
+import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { usePopover } from "../Popover/usePopover.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
+import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
+import { Divider } from "../Divider/index.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { Spinner } from "../Spinner/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
+import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
+import { useCombobox, useSelectedItemOffset } from "./hooks.js";
+import { SelectorOption } from "./SelectorOption.js";
+import { mergeProps } from "../utils/index.js";
+import { useSize } from "../SizeContext/SizeContext.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  triggerContainer: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    k8WAf4: "xce4md1",
+    kg3NbH: "xrrkdod",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib xdk3u5w",
+    kLWn49: "x1kq96og",
+    kMwMTN: "x1tgivj0",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  triggerPlaceholder: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  popover: {
+    k7Eaqz: "xrzjruh",
+    $$css: true
+  },
+  sectionDivider: {
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  },
+  divider: {
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  },
+  item: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    kmVPX3: "xlsj2fj",
+    kaIpWk: "xh6dtrn",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk",
+    k9WMMc: "xdpxx8g",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  itemHighlighted: {
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  itemSelected: {
+    k63SB2: "x1e4wzip",
+    $$css: true
+  },
+  itemDisabled: {
+    kSiTet: "xbyyjgo",
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    $$css: true
+  }
+};
+
+/**
+ * Size-specific overrides for dropdown list items.
+ * Matches the pattern used by DropdownMenuItem so that
+ * an `sm` selector renders compact list items, `md`/`lg` use
+ * the base padding defined in `styles.item`.
+ */
+const itemSizeStyles = {
+  sm: {
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  md: {
+    k8WAf4: "x1vofgu7",
+    $$css: true
+  },
+  lg: {
+    $$css: true
+  }
+};
+const STATUS_ICON_MAP = {
+  warning: 'warning',
+  error: 'error',
+  success: 'success'
+};
+const STATUS_ICON_COLOR_MAP = {
+  warning: 'warning',
+  error: 'error',
+  success: 'success'
+};
+
+/**
+ * Without `hasClear`, the selector always has a string value (or undefined for placeholder).
+ * With `hasClear`, the value can be `null` and onChange receives `null` on clear.
+ */
+
+/**
+ * Default option renderer
+ */
+function DefaultOption({
+  option
+}) {
+  return /*#__PURE__*/_jsx(SelectorOption, {
+    icon: option.icon,
+    label: option.label ?? option.value
+  });
+}
+
+/**
+ * A selector/dropdown component for choosing from a list of options.
+ *
+ * @example
+ * ```
+ * <Selector
+ *   label="Fruit"
+ *   options={['Apple', 'Banana', 'Orange']}
+ *   value={fruit}
+ *   onChange={setFruit}
+ *   placeholder="Select a fruit..."
+ * />
+ * ```
+ */
+export function Selector(props) {
+  const {
+    label,
+    isLabelHidden = false,
+    description,
+    isOptional = false,
+    isRequired = false,
+    isDisabled = false,
+    options,
+    value,
+    onChange,
+    changeAction,
+    isLoading = false,
+    placeholder = 'Select...',
+    size: sizeProp,
+    status,
+    labelTooltip,
+    startIcon,
+    renderOption,
+    hasSearch = false,
+    searchPlaceholder = 'Search...',
+    placement,
+    isDefaultOpen = false,
+    'data-testid': testId,
+    width,
+    xstyle,
+    className,
+    style,
+    hasClear: hasClearProp,
+    ...rest
+  } = props;
+  const hasClear = hasClearProp === true;
+  const size = useSize(sizeProp, 'md');
+
+  // Normalize null to undefined for internal use (null is the clear sentinel)
+  const normalizedValue = value === null ? undefined : value;
+  const triggerId = useId();
+  const listboxId = useId();
+  const descriptionId = useId();
+  const statusMessageId = useId();
+  const searchId = useId();
+  const triggerRef = useRef(null);
+  const searchRef = useRef(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(normalizedValue);
+  const isBusy = isLoading || optimisticValue !== normalizedValue;
+
+  // Build aria-describedby
+  const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
+
+  // Flatten options for keyboard navigation
+  const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
+
+  // Filter items by search query
+  const filteredItems = useMemo(() => {
+    if (!searchQuery) {
+      return selectableItems;
+    }
+    const query = searchQuery.toLowerCase();
+    return selectableItems.filter(item => (item.label ?? item.value).toLowerCase().includes(query));
+  }, [selectableItems, searchQuery]);
+
+  // Find selected item and its index for positioning
+  const selectedItemIndex = useMemo(() => {
+    return selectableItems.findIndex(item => item.value === optimisticValue);
+  }, [selectableItems, optimisticValue]);
+  const selectedItem = useMemo(() => {
+    return selectedItemIndex >= 0 ? selectableItems[selectedItemIndex] : undefined;
+  }, [selectableItems, selectedItemIndex]);
+
+  // Ref for listbox to measure selected item position
+  const listboxRef = useRef(null);
+
+  // Layer for dropdown positioning
+  const handleLayerHide = useCallback(() => {
+    setSearchQuery('');
+    triggerRef.current?.focus();
+  }, []);
+  const popover = usePopover({
+    onHide: handleLayerHide,
+    hasLightDismiss: true,
+    hasCloseButton: false,
+    hasAutoFocus: false
+  });
+
+  // Open dropdown on mount when isDefaultOpen is true
+  useEffect(() => {
+    if (isDefaultOpen) {
+      popover.show();
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
+  }, []);
+
+  // Calculate offset to position selected item over trigger. Explicit
+  // placement opts out of the selector-specific overlay behavior and uses the
+  // standard layer positioning API instead.
+  const shouldOverlaySelectedItem = placement == null && !hasSearch;
+  const {
+    offset: rawOffset,
+    isPositioned: rawIsPositioned
+  } = useSelectedItemOffset({
+    isOpen: popover.isOpen && shouldOverlaySelectedItem,
+    selectedItemIndex,
+    listboxId,
+    listboxRef,
+    triggerRef
+  });
+  const selectedItemOffset = shouldOverlaySelectedItem ? rawOffset : 0;
+  const isPositioned = shouldOverlaySelectedItem ? rawIsPositioned : true;
+  const popoverPlacement = placement ?? 'below';
+  const popoverOffsetStyle = selectedItemOffset > 0 ? {
+    marginBlockStart: `-${selectedItemOffset}px`
+  } : undefined;
+
+  // Selector behavior (keyboard nav, typeahead, selection)
+  const {
+    highlightedIndex,
+    setHighlightedIndex: _setHighlightedIndex,
+    getItemId,
+    onTriggerClick,
+    onKeyDown,
+    onItemSelect,
+    onItemMouseEnter
+  } = useCombobox({
+    selectableItems: filteredItems,
+    value: normalizedValue,
+    isDisabled,
+    isOpen: popover.isOpen,
+    hasSearch,
+    onOpen: useCallback(() => {
+      popover.show();
+      if (hasSearch) {
+        requestAnimationFrame(() => {
+          searchRef.current?.focus();
+        });
+      }
+    }, [popover, hasSearch]),
+    onClose: popover.hide,
+    onSelect: useCallback(newValue => {
+      onChange?.(newValue);
+      if (changeAction) {
+        startTransition(async () => {
+          setOptimisticValue(newValue);
+          await changeAction(newValue);
+        });
+      }
+    }, [onChange, changeAction, startTransition, setOptimisticValue]),
+    listboxId
+  });
+
+  // Handle clear button click
+  const handleClear = useCallback(e => {
+    e.stopPropagation(); // Don't open dropdown
+    onChange?.(null);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(undefined);
+        await changeAction(null);
+      });
+    }
+  }, [onChange, changeAction, startTransition, setOptimisticValue]);
+
+  // Render search input
+  const renderSearch = useCallback(() => {
+    if (!hasSearch) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "xf314gf xu0wf1k"
+      },
+      children: /*#__PURE__*/_jsx("input", {
+        ref: searchRef,
+        id: searchId,
+        role: "searchbox",
+        "aria-controls": listboxId,
+        "aria-label": "Search options",
+        type: "text",
+        value: searchQuery,
+        onChange: e => setSearchQuery(e.target.value),
+        onKeyDown: e => {
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Escape' || e.key === 'Tab') {
+            onKeyDown(e);
+          }
+        },
+        placeholder: searchPlaceholder,
+        ...{
+          className: "x9f619 xh8yej3 xu0wf1k xf314gf x1litavf x1y0btm7 xvy26l8 xh6dtrn x10xzikg x9ynric xcr08ib xdk3u5w x1tgivj0 x1a2a7pz xzeu18z x1wfwxd8"
+        }
+      })
+    });
+  }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown]);
+
+  // Render an individual item
+  const renderItem = useCallback((item, flatIndex) => {
+    const isHighlighted = flatIndex === highlightedIndex;
+    const isSelected = item.value === normalizedValue;
+    return /*#__PURE__*/_jsxs("div", {
+      id: getItemId(flatIndex),
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": item.disabled,
+      onClick: () => onItemSelect(item),
+      onMouseEnter: () => onItemMouseEnter(item, flatIndex),
+      ...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
+        },
+        children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
+          option: item
+        })
+      }), isSelected && /*#__PURE__*/_jsx(Icon, {
+        icon: "check",
+        size: "sm",
+        color: "accent"
+      })]
+    }, item.value);
+  }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
+
+  // Render all options (handling sections/dividers)
+  const renderOptions = useCallback(() => {
+    // When search is active, render filtered items flat (no sections/dividers)
+    if (hasSearch && searchQuery) {
+      if (filteredItems.length === 0) {
+        return [/*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
+          },
+          children: "No results found"
+        }, "empty")];
+      }
+      return filteredItems.map((item, index) => renderItem(item, index));
+    }
+    let flatIndex = 0;
+    const elements = [];
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
+      if (isDivider(option)) {
+        elements.push(/*#__PURE__*/_jsx(Divider, {
+          xstyle: styles.divider
+        }, `divider-${i}`));
+      } else if (isSection(option)) {
+        const sectionItems = [];
+        for (const opt of option.options) {
+          sectionItems.push(renderItem(normalizeOption(opt), flatIndex));
+          flatIndex++;
+        }
+        if (option.title) {
+          elements.push(/*#__PURE__*/_jsx(Divider, {
+            label: option.title,
+            xstyle: styles.sectionDivider
+          }, `section-divider-${i}`));
+        }
+        elements.push(/*#__PURE__*/_jsx("div", {
+          role: "group",
+          "aria-label": option.title,
+          children: sectionItems
+        }, `section-${i}`));
+      } else if (isOptionData(option)) {
+        elements.push(renderItem(normalizeOption(option), flatIndex));
+        flatIndex++;
+      }
+    }
+    return elements;
+  }, [options, renderItem, hasSearch, searchQuery, filteredItems]);
+  return /*#__PURE__*/_jsxs(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: triggerId,
+    descriptionID: description ? descriptionId : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageId : undefined
+    } : undefined,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: el => {
+        popover.triggerRef(el);
+      },
+      onClick: onTriggerClick,
+      "data-testid": testId,
+      ...mergeProps(themeProps('selector', {
+        size,
+        status: status?.type ?? null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, !selectedItem && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], xstyle), className, style),
+      children: [startIcon && renderIconSlot(startIcon, {
+        size: 'sm',
+        color: 'secondary'
+      }), /*#__PURE__*/_jsx("button", {
+        ref: triggerRef,
+        id: triggerId,
+        type: "button",
+        role: "combobox",
+        ...rest,
+        "aria-haspopup": "listbox",
+        "aria-expanded": popover.isOpen,
+        "aria-controls": listboxId,
+        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isRequired ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        disabled: isDisabled,
+        onKeyDown: onKeyDown,
+        tabIndex: -1,
+        ...{
+          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz x1p25gnr x1wfwxd8 xh6dtrn"
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x1iyjqo2 xeuugli xb3r6kr xlyipyv xuxw1ft x1yc453h"
+          },
+          children: selectedItem?.label ?? placeholder
+        })
+      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        size: "sm"
+      }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        tabIndex: -1,
+        onClick: handleClear,
+        "aria-label": `Clear ${label}`,
+        ...{
+          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "close",
+          size: "sm",
+          color: "secondary"
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
+          },
+          2: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
+          },
+          1: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike xq2gx43"
+          },
+          3: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
+          }
+        }[!!(!status && popover.isOpen) << 1 | !!status << 0],
+        children: status ? /*#__PURE__*/_jsx(Icon, {
+          icon: STATUS_ICON_MAP[status.type],
+          size: "sm",
+          color: STATUS_ICON_COLOR_MAP[status.type]
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "inherit"
+        })
+      })]
+    }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
+      children: [renderSearch(), /*#__PURE__*/_jsx("div", {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-labelledby": triggerId,
+        ...{
+          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
+        },
+        children: renderOptions()
+      })]
+    }) : /*#__PURE__*/_jsx("div", {
+      ref: listboxRef,
+      id: listboxId,
+      role: "listbox",
+      "aria-labelledby": triggerId,
+      ...{
+        0: {
+          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
+        },
+        1: {
+          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk xg01cxk xq2gx43"
+        }
+      }[!!!isPositioned << 0],
+      children: renderOptions()
+    }), {
+      placement: popoverPlacement,
+      alignment: 'start',
+      xstyle: [styles.popover, layerAnimations[popoverPlacement]],
+      style: popoverOffsetStyle
+    })]
+  });
+}
+Selector.displayName = 'Selector';

package/dist/Selector/SelectorOption.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @file SelectorOption.tsx
+ * @output Exports SelectorOption component for custom option rendering
+ * @position Sub-component; used by Selector and consumers for custom options
+ *
+ * Composes Item for the shared start content + label + description + end content layout.
+ */
+import type { ReactNode } from 'react';
+import type { StyleXStyles } from '@stylexjs/stylex';
+import { type IconType } from '../Icon';
+export interface SelectorOptionProps {
+    /**
+     * Icon to display before the label.
+     */
+    icon?: ReactNode | IconType;
+    /**
+     * Primary label text.
+     */
+    label: ReactNode;
+    /**
+     * Secondary description text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Additional content to render after the label/description.
+     */
+    endContent?: ReactNode;
+    /**
+     * StyleX styles created via `stylex.create()`. Merged with the component's
+     * base styles inside a single `stylex.props()` call for optimal deduplication.
+     *
+     * @example
+     * ```
+     * const overrides = stylex.create({ root: { marginBottom: 8 } });
+     * <Component xstyle={overrides.root} />
+     * ```
+     */
+    xstyle?: StyleXStyles;
+    /**
+     * CSS class name(s) appended to the root element.
+     * If you're using StyleX, prefer `xstyle` for optimal style deduplication.
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the root element. Spread after StyleX
+     * inline styles, so these values take priority.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * A helper component for rendering custom selector options with consistent styling.
+ *
+ * Use this inside the `renderOption` prop of Selector to create
+ * custom option layouts while maintaining design system consistency.
+ *
+ * @example
+ * ```
+ * <Selector
+ *   label="User"
+ *   options={users}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderOption={option => (
+ *     <SelectorOption
+ *       icon={UserIcon}
+ *       label={option.label}
+ *       description={option.email}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function SelectorOption({ icon, label, description, endContent, xstyle, className, style, }: SelectorOptionProps): import("react").JSX.Element;
+export declare namespace SelectorOption {
+    var displayName: string;
+}
+//# sourceMappingURL=SelectorOption.d.ts.map

package/dist/Selector/SelectorOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorOption.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorOption.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAatD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BAerB;yBAvBe,cAAc"}