@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/ScrollArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ScrollArea/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ScrollArea.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Scroll direction */\n  orientation?: 'horizontal' | 'vertical' | 'both';\n  /** Scrollbar visibility behavior */\n  scrollbarVisibility?: 'auto' | 'always' | 'hover';\n  /** Whether to show fade indicators at scroll edges */\n  showFades?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * ScrollArea - A styled scrollable container with customizable scrollbars.\n *\n * Provides thin, unobtrusive scrollbars that appear on hover or scroll,\n * with optional fade indicators to hint at overflowing content.\n */\nfunction ScrollAreaRoot({\n  children,\n  orientation = 'vertical',\n  scrollbarVisibility = 'auto',\n  showFades = false,\n  className,\n  ...htmlProps\n}: ScrollAreaProps) {\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n\n  const updateScrollState = React.useCallback(() => {\n    const el = viewportRef.current;\n    if (!el || !showFades) return;\n\n    if (orientation === 'horizontal') {\n      setCanScrollStart(el.scrollLeft > 1);\n      setCanScrollEnd(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);\n    } else {\n      setCanScrollStart(el.scrollTop > 1);\n      setCanScrollEnd(el.scrollTop < el.scrollHeight - el.clientHeight - 1);\n    }\n  }, [orientation, showFades]);\n\n  React.useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || !showFades) return;\n\n    // Defer initial check to ensure children have laid out\n    const raf = requestAnimationFrame(updateScrollState);\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    // Observe both the viewport AND its children for size changes\n    // (viewport size stays constant when children overflow — only scrollWidth changes)\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n    Array.from(el.children).forEach(child => observer.observe(child));\n\n    return () => {\n      cancelAnimationFrame(raf);\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [showFades, updateScrollState]);\n\n  const rootClasses = [\n    styles.root,\n    className,\n  ].filter(Boolean).join(' ');\n\n  // Determine which fade mask to apply to the viewport\n  const fadeMask = showFades\n    ? canScrollStart && canScrollEnd\n      ? styles.fadeMaskBoth\n      : canScrollStart\n        ? styles.fadeMaskStart\n        : canScrollEnd\n          ? styles.fadeMaskEnd\n          : undefined\n    : undefined;\n\n  const viewportClasses = [\n    styles.viewport,\n    styles[orientation],\n    scrollbarVisibility === 'always' && styles.scrollbarAlways,\n    scrollbarVisibility === 'hover' && styles.scrollbarHover,\n    fadeMask,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      {...htmlProps}\n      className={rootClasses}\n      data-orientation={orientation}\n    >\n      <div ref={viewportRef} className={viewportClasses}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Export\n// ============================================\n\nexport const ScrollArea = Object.assign(ScrollAreaRoot, {\n  Root: ScrollAreaRoot,\n});\n"],"names":[],"mappings":";;;AA+BA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,cAAc,MAAM,OAAuB,IAAI;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAS,KAAK;AAChE,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,QAAM,oBAAoB,MAAM,YAAY,MAAM;AAChD,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,CAAC,UAAW;AAEvB,QAAI,gBAAgB,cAAc;AAChC,wBAAkB,GAAG,aAAa,CAAC;AACnC,sBAAgB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC;AAAA,IACrE,OAAO;AACL,wBAAkB,GAAG,YAAY,CAAC;AAClC,sBAAgB,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,CAAC,UAAW;AAGvB,UAAM,MAAM,sBAAsB,iBAAiB;AAEnD,OAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,MAAM;AAIlE,UAAM,WAAW,IAAI,eAAe,iBAAiB;AACrD,aAAS,QAAQ,EAAE;AACnB,UAAM,KAAK,GAAG,QAAQ,EAAE,QAAQ,CAAA,UAAS,SAAS,QAAQ,KAAK,CAAC;AAEhE,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,SAAG,oBAAoB,UAAU,iBAAiB;AAClD,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,WAAW,YACb,kBAAkB,eAChB,OAAO,eACP,iBACE,OAAO,gBACP,eACE,OAAO,cACP,SACN;AAEJ,QAAM,kBAAkB;AAAA,IACtB,OAAO;AAAA,IACP,OAAO,WAAW;AAAA,IAClB,wBAAwB,YAAY,OAAO;AAAA,IAC3C,wBAAwB,WAAW,OAAO;AAAA,IAC1C;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,oBAAkB;AAAA,MAElB,8BAAC,OAAA,EAAI,KAAK,aAAa,WAAW,iBAC/B,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AACR,CAAC;"}

package/dist/components/Select/Select.module.scss.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const trigger = "_trigger_19ioy_1";
+const value = "_value_19ioy_56";
+const placeholder = "_placeholder_19ioy_69";
+const icon = "_icon_19ioy_73";
+const positioner = "_positioner_19ioy_88";
+const popup = "_popup_19ioy_93";
+const item = "_item_19ioy_120";
+const itemIndicator = "_itemIndicator_19ioy_164";
+const group = "_group_19ioy_177";
+const groupLabel = "_groupLabel_19ioy_183";
+const styles = {
+  trigger,
+  value,
+  placeholder,
+  icon,
+  positioner,
+  popup,
+  item,
+  itemIndicator,
+  group,
+  groupLabel
+};
+exports.default = styles;
+exports.group = group;
+exports.groupLabel = groupLabel;
+exports.icon = icon;
+exports.item = item;
+exports.itemIndicator = itemIndicator;
+exports.placeholder = placeholder;
+exports.popup = popup;
+exports.positioner = positioner;
+exports.trigger = trigger;
+exports.value = value;
+//# sourceMappingURL=Select.module.scss.cjs.map

package/dist/components/Select/Select.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Select/Select.module.scss.js

@@ -0,0 +1,36 @@
+const trigger = "_trigger_19ioy_1";
+const value = "_value_19ioy_56";
+const placeholder = "_placeholder_19ioy_69";
+const icon = "_icon_19ioy_73";
+const positioner = "_positioner_19ioy_88";
+const popup = "_popup_19ioy_93";
+const item = "_item_19ioy_120";
+const itemIndicator = "_itemIndicator_19ioy_164";
+const group = "_group_19ioy_177";
+const groupLabel = "_groupLabel_19ioy_183";
+const styles = {
+  trigger,
+  value,
+  placeholder,
+  icon,
+  positioner,
+  popup,
+  item,
+  itemIndicator,
+  group,
+  groupLabel
+};
+export {
+  styles as default,
+  group,
+  groupLabel,
+  icon,
+  item,
+  itemIndicator,
+  placeholder,
+  popup,
+  positioner,
+  trigger,
+  value
+};
+//# sourceMappingURL=Select.module.scss.js.map

package/dist/components/Select/Select.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Select/index.cjs

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const select = require("@base-ui/react/select");
+const Select_module = require("./Select.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+const SelectContext = React__namespace.createContext({
+  itemsRef: { current: /* @__PURE__ */ new Map() },
+  itemsVersion: 0,
+  incrementItemsVersion: () => {
+  }
+});
+function SelectRoot({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  required,
+  name,
+  placeholder
+}) {
+  const [internalValue, setInternalValue] = React__namespace.useState(
+    value ?? defaultValue ?? null
+  );
+  const itemsRef = React__namespace.useRef(/* @__PURE__ */ new Map());
+  const [itemsVersion, setItemsVersion] = React__namespace.useState(0);
+  const incrementItemsVersion = React__namespace.useCallback(() => {
+    setItemsVersion((v) => v + 1);
+  }, []);
+  React__namespace.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleValueChange = React__namespace.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [value, onValueChange]
+  );
+  const contextValue = React__namespace.useMemo(
+    () => ({
+      placeholder,
+      value: value !== void 0 ? value : internalValue,
+      itemsRef,
+      itemsVersion,
+      incrementItemsVersion
+    }),
+    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      required,
+      name,
+      children
+    }
+  ) });
+}
+function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
+  const context = React__namespace.useContext(SelectContext);
+  const placeholderText = placeholder ?? context.placeholder;
+  const classes = [Select_module.default.trigger, className].filter(Boolean).join(" ");
+  const selectedContent = context.value != null ? context.itemsRef.current.get(context.value) : null;
+  context.itemsVersion;
+  const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.placeholder, children: placeholderText }) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+  ] }) });
+}
+function SelectContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = "start",
+  maxVisibleItems,
+  ...htmlProps
+}) {
+  const popupClasses = [Select_module.default.popup, className].filter(Boolean).join(" ");
+  const popupStyle = maxVisibleItems != null ? { "--fui-select-max-items": maxVisibleItems + 0.5, ...htmlProps.style } : htmlProps.style;
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Positioner,
+    {
+      sideOffset,
+      align,
+      className: Select_module.default.positioner,
+      children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children })
+    }
+  ) });
+}
+function SelectItem({ children, value, disabled, className }) {
+  const { itemsRef, incrementItemsVersion } = React__namespace.useContext(SelectContext);
+  const classes = [Select_module.default.item, className].filter(Boolean).join(" ");
+  React__namespace.useEffect(() => {
+    const items = itemsRef.current;
+    items.set(value, children);
+    incrementItemsVersion();
+    return () => {
+      items.delete(value);
+    };
+  }, [itemsRef, incrementItemsVersion, value, children]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { value, disabled, className: classes, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: Select_module.default.itemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+  ] });
+}
+function SelectGroup({ children, className }) {
+  const classes = [Select_module.default.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Group, { className: classes, children });
+}
+function SelectGroupLabel({ children, className }) {
+  const classes = [Select_module.default.groupLabel, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: classes, children });
+}
+const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel
+});
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectGroupLabel = SelectGroupLabel;
+exports.SelectItem = SelectItem;
+exports.SelectRoot = SelectRoot;
+exports.SelectTrigger = SelectTrigger;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  children: React.ReactNode;\n  value?: SelectValue | null;\n  defaultValue?: SelectValue;\n  onValueChange?: (value: SelectValue | null) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface SelectGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface SelectGroupLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["jsx","React","BaseSelect","styles","jsxs","Fragment"],"mappings":"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"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+export type SelectValue = string;
+export interface SelectOption {
+    value: SelectValue;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    children: React.ReactNode;
+    value?: SelectValue | null;
+    defaultValue?: SelectValue;
+    onValueChange?: (value: SelectValue | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    placeholder?: string;
+}
+export interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    placeholder?: string;
+}
+export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */
+    maxVisibleItems?: number;
+}
+export interface SelectItemProps {
+    children: React.ReactNode;
+    value: SelectValue;
+    disabled?: boolean;
+    className?: string;
+}
+export interface SelectGroupProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface SelectGroupLabelProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function SelectRoot({ children, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, required, name, placeholder, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ children, className, sideOffset, align, maxVisibleItems, ...htmlProps }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ children, value, disabled, className }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ children, className }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroupLabel({ children, className }: SelectGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const Select: typeof SelectRoot & {
+    Trigger: typeof SelectTrigger;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+    GroupLabel: typeof SelectGroupLabel;
+};
+export { SelectRoot, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+import styles from "./Select.module.scss.js";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+const SelectContext = React.createContext({
+  itemsRef: { current: /* @__PURE__ */ new Map() },
+  itemsVersion: 0,
+  incrementItemsVersion: () => {
+  }
+});
+function SelectRoot({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  required,
+  name,
+  placeholder
+}) {
+  const [internalValue, setInternalValue] = React.useState(
+    value ?? defaultValue ?? null
+  );
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const [itemsVersion, setItemsVersion] = React.useState(0);
+  const incrementItemsVersion = React.useCallback(() => {
+    setItemsVersion((v) => v + 1);
+  }, []);
+  React.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [value, onValueChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      placeholder,
+      value: value !== void 0 ? value : internalValue,
+      itemsRef,
+      itemsVersion,
+      incrementItemsVersion
+    }),
+    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]
+  );
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      required,
+      name,
+      children
+    }
+  ) });
+}
+function SelectTrigger({ children, placeholder, className, ...htmlProps }) {
+  const context = React.useContext(SelectContext);
+  const placeholderText = placeholder ?? context.placeholder;
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  const selectedContent = context.value != null ? context.itemsRef.current.get(context.value) : null;
+  context.itemsVersion;
+  const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsx("span", { className: styles.placeholder, children: placeholderText }) : null);
+  return /* @__PURE__ */ jsx(Select$1.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
+    /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+  ] }) });
+}
+function SelectContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = "start",
+  maxVisibleItems,
+  ...htmlProps
+}) {
+  const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
+  const popupStyle = maxVisibleItems != null ? { "--fui-select-max-items": maxVisibleItems + 0.5, ...htmlProps.style } : htmlProps.style;
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+    Select$1.Positioner,
+    {
+      sideOffset,
+      align,
+      className: styles.positioner,
+      children: /* @__PURE__ */ jsx(Select$1.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children })
+    }
+  ) });
+}
+function SelectItem({ children, value, disabled, className }) {
+  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);
+  const classes = [styles.item, className].filter(Boolean).join(" ");
+  React.useEffect(() => {
+    const items = itemsRef.current;
+    items.set(value, children);
+    incrementItemsVersion();
+    return () => {
+      items.delete(value);
+    };
+  }, [itemsRef, incrementItemsVersion, value, children]);
+  return /* @__PURE__ */ jsxs(Select$1.Item, { value, disabled, className: classes, children: [
+    /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
+    /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+  ] });
+}
+function SelectGroup({ children, className }) {
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Select$1.Group, { className: classes, children });
+}
+function SelectGroupLabel({ children, className }) {
+  const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Select$1.GroupLabel, { className: classes, children });
+}
+const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel
+});
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectRoot,
+  SelectTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport styles from './Select.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type SelectValue = string;\n\nexport interface SelectOption {\n  value: SelectValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  children: React.ReactNode;\n  value?: SelectValue | null;\n  defaultValue?: SelectValue;\n  onValueChange?: (value: SelectValue | null) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n}\n\nexport interface SelectTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  placeholder?: string;\n}\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode;\n  value: SelectValue;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface SelectGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface SelectGroupLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Select state\n// ============================================\n\ninterface SelectContextValue {\n  placeholder?: string;\n  value?: SelectValue | null;\n  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;\n  // Version counter to trigger re-renders when items register\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction SelectRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n}: SelectProps) {\n  // Track current value for controlled and uncontrolled modes\n  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(\n    value ?? defaultValue ?? null\n  );\n\n  // Registry for item children - allows trigger to render selected item's content\n  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());\n\n  // Version counter to trigger trigger re-render when items register\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  // Sync internal value with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  const handleValueChange = React.useCallback(\n    (newValue: SelectValue | null) => {\n      if (value === undefined) {\n        // Uncontrolled mode\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      placeholder,\n      value: value !== undefined ? value : internalValue,\n      itemsRef,\n      itemsVersion,\n      incrementItemsVersion,\n    }),\n    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <BaseSelect.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n      >\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({ children, placeholder, className, ...htmlProps }: SelectTriggerProps) {\n  const context = React.useContext(SelectContext);\n  const placeholderText = placeholder ?? context.placeholder;\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Get the selected item's children from the registry\n  // Note: itemsVersion in context ensures we re-render when items register\n  const selectedContent = context.value != null\n    ? context.itemsRef.current.get(context.value)\n    : null;\n\n  // Determine what to show in the value area\n   \n  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render\n  const displayContent = selectedContent ?? (\n    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null\n  );\n\n  return (\n    <BaseSelect.Trigger {...htmlProps} className={classes}>\n      {children ?? (\n        <>\n          <span className={styles.value}>{displayContent}</span>\n          <BaseSelect.Icon className={styles.icon}>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </>\n      )}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: SelectContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseSelect.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectItem({ children, value, disabled, className }: SelectItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(SelectContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's children in the registry so the trigger can display them\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, children);\n    // Trigger re-render of trigger to show the registered content\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n    };\n  }, [itemsRef, incrementItemsVersion, value, children]);\n\n  return (\n    <BaseSelect.Item value={value} disabled={disabled} className={classes}>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectGroup({ children, className }: SelectGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseSelect.Group className={classes}>{children}</BaseSelect.Group>;\n}\n\nfunction SelectGroupLabel({ children, className }: SelectGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseSelect.GroupLabel className={classes}>{children}</BaseSelect.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  SelectRoot,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectGroupLabel,\n};\n"],"names":["BaseSelect"],"mappings":"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"}

package/dist/components/Separator/Separator.module.scss.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const separator = "_separator_1rior_1";
+const horizontal = "_horizontal_1rior_6";
+const vertical = "_vertical_1rior_11";
+const withLabel = "_withLabel_1rior_17";
+const label = "_label_1rior_30";
+const spacingNone = "_spacingNone_1rior_40";
+const spacingSm = "_spacingSm_1rior_44";
+const spacingMd = "_spacingMd_1rior_51";
+const spacingLg = "_spacingLg_1rior_58";
+const soft = "_soft_1rior_65";
+const styles = {
+  separator,
+  horizontal,
+  vertical,
+  withLabel,
+  label,
+  spacingNone,
+  spacingSm,
+  spacingMd,
+  spacingLg,
+  soft
+};
+exports.default = styles;
+exports.horizontal = horizontal;
+exports.label = label;
+exports.separator = separator;
+exports.soft = soft;
+exports.spacingLg = spacingLg;
+exports.spacingMd = spacingMd;
+exports.spacingNone = spacingNone;
+exports.spacingSm = spacingSm;
+exports.vertical = vertical;
+exports.withLabel = withLabel;
+//# sourceMappingURL=Separator.module.scss.cjs.map

package/dist/components/Separator/Separator.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}