@bacon-pos/ui 0.9.0 → 0.10.0

package/lib/module/components/Sidebar/Sidebar.js

@@ -0,0 +1,260 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { BaconLogo } from "../brand/BaconLogo.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Text } from "../Text/Text.js";
+import { ScrollArea } from "../_internal/ScrollArea.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ITEM_HEIGHT = 74;
+const ITEM_GAP = 16;
+const PADDING = 24;
+const TOGGLE_SIZE = 40; // IconButton size "sm"
+
+function SidebarButton({
+  item,
+  active,
+  collapsed,
+  onPress
+}) {
+  const theme = useTheme();
+  const [hovered, setHovered] = useState(false);
+  const disabled = item.disabled;
+  const backgroundColor = active ? theme.colors.action.secondary : hovered && !disabled ? theme.colors.background.muted : 'transparent';
+  const contentColor = active ? theme.colors.action.secondaryForeground : theme.colors.text.secondary;
+  const iconColor = active ? theme.colors.action.secondaryForeground : 'secondary';
+  const iconName = active && item.activeIcon ? item.activeIcon : item.icon;
+  const initial = item.label.trim().charAt(0).toUpperCase();
+
+  // Leading slot is always a fixed 24×24 box (flexShrink: 0) so the icon never
+  // shrinks next to a long label and labels stay aligned with or without an icon.
+  // No icon → reserve the space when expanded; show the initial when collapsed.
+  const leadingBox = {
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  const leading = /*#__PURE__*/_jsx(View, {
+    style: leadingBox,
+    children: iconName ? /*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: 24,
+      color: iconColor
+    }) : collapsed ? /*#__PURE__*/_jsx(Text, {
+      variant: "bodyLarge",
+      weight: "medium",
+      color: contentColor,
+      children: initial
+    }) : null
+  });
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: disabled ? undefined : onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    disabled: disabled,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active,
+      disabled
+    },
+    accessibilityLabel: item.label,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      gap: 10,
+      height: ITEM_HEIGHT,
+      paddingHorizontal: PADDING,
+      borderRadius: theme.radii.pill,
+      borderWidth: active ? 1 : 0,
+      borderColor: active ? theme.colors.border.default : 'transparent',
+      backgroundColor,
+      opacity: disabled ? 0.5 : 1
+    },
+    children: [leading, !collapsed ? /*#__PURE__*/_jsx(Text, {
+      variant: "bodyLarge",
+      weight: "medium",
+      color: contentColor,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: {
+        flexShrink: 1,
+        minWidth: 0
+      },
+      children: item.label
+    }) : null]
+  });
+}
+
+/**
+ * Sidebar — the app's main navigation drawer (Figma "Sidebar"). Expands/collapses
+ * between a labelled and an icon-only rail (animated width). The logo defaults to
+ * the Bacon mark (override via `logo`); an optional `footer` shows supporting text
+ * at the bottom. Items are dynamic buttons (icon + label via props); the list
+ * scrolls with an elegant auto-hiding indicator when it overflows, leaving the
+ * footer pinned. Buttons have hover and active states to mark the current section.
+ */
+export function Sidebar({
+  items = [],
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  showToggle = true,
+  logo,
+  footer,
+  expandedWidth = 284,
+  collapsedWidth = 122,
+  scrollbarColor,
+  style
+}) {
+  const theme = useTheme();
+  const activeControlled = activeKey !== undefined;
+  const [activeInternal, setActiveInternal] = useState(defaultActiveKey);
+  const active = activeControlled ? activeKey : activeInternal;
+  const collapseControlled = collapsedProp !== undefined;
+  const [collapsedInternal, setCollapsedInternal] = useState(defaultCollapsed);
+  const collapsed = collapseControlled ? collapsedProp : collapsedInternal;
+  const width = useRef(new Animated.Value(collapsed ? collapsedWidth : expandedWidth)).current;
+  // `visualCollapsed` drives the layout (labels, alignment, footer). It lags on
+  // collapse — labels stay mounted (clipped by overflow) until the width finishes
+  // shrinking — and leads on expand, so both directions animate without a jump.
+  const [visualCollapsed, setVisualCollapsed] = useState(collapsed);
+  useEffect(() => {
+    if (!collapsed) setVisualCollapsed(false);
+    const anim = Animated.timing(width, {
+      toValue: collapsed ? collapsedWidth : expandedWidth,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false // width
+    });
+    anim.start(({
+      finished
+    }) => {
+      if (finished && collapsed) setVisualCollapsed(true);
+    });
+    return () => anim.stop();
+  }, [collapsed, collapsedWidth, expandedWidth, width]);
+
+  // The toggle arrow spins in place (0° → 180°) instead of moving, so collapsing
+  // never nudges it. Driven by intent (`collapsed`), in sync with the width.
+  const arrowRot = useRef(new Animated.Value(collapsed ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(arrowRot, {
+      toValue: collapsed ? 1 : 0,
+      duration: 220,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [collapsed, arrowRot]);
+  const arrowRotate = arrowRot.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+
+  // Glide the toggle from flush-left (expanded) to centered on the icon axis
+  // (collapsed), tracking the width so it never jumps.
+  const toggleTranslateX = width.interpolate({
+    inputRange: [collapsedWidth, expandedWidth],
+    outputRange: [Math.max(0, (collapsedWidth - 2 * PADDING - TOGGLE_SIZE) / 2), 0],
+    extrapolate: 'clamp'
+  });
+  const selectItem = item => {
+    if (!activeControlled) setActiveInternal(item.key);
+    item.onPress?.();
+    onChange?.(item.key);
+  };
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    if (!collapseControlled) setCollapsedInternal(next);
+    onCollapsedChange?.(next);
+  };
+  const logoNode = logo ?? /*#__PURE__*/_jsx(BaconLogo, {
+    height: visualCollapsed ? 36 : 40
+  });
+  const toggle = showToggle ? /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        translateX: toggleTranslateX
+      }]
+    },
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        transform: [{
+          rotate: arrowRotate
+        }]
+      },
+      children: /*#__PURE__*/_jsx(IconButton, {
+        icon: "arrow-left",
+        accessibilityLabel: collapsed ? 'Expand sidebar' : 'Collapse sidebar',
+        variant: "ghost",
+        size: "sm",
+        onPress: toggleCollapsed
+      })
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [{
+      width,
+      height: '100%',
+      backgroundColor: theme.colors.background.default,
+      paddingTop: 48,
+      paddingBottom: PADDING,
+      paddingHorizontal: PADDING,
+      overflow: 'hidden'
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        minHeight: 56,
+        alignItems: visualCollapsed ? 'center' : 'flex-start',
+        justifyContent: 'center'
+      },
+      children: logoNode
+    }), /*#__PURE__*/_jsx(ScrollArea, {
+      style: {
+        flex: 1,
+        marginTop: 32
+      },
+      indicatorColor: scrollbarColor ?? theme.colors.border.strong,
+      contentContainerStyle: {
+        gap: ITEM_GAP,
+        paddingBottom: 8
+      },
+      children: items.map(item => /*#__PURE__*/_jsx(SidebarButton, {
+        item: item,
+        active: item.key === active,
+        collapsed: visualCollapsed,
+        onPress: () => selectItem(item)
+      }, item.key))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        marginTop: 28,
+        gap: 16
+      },
+      children: [footer && !visualCollapsed ? /*#__PURE__*/_jsx(Text, {
+        variant: "bodySmall",
+        color: "tertiary",
+        numberOfLines: 1,
+        style: {
+          marginLeft: 8
+        },
+        children: footer
+      }) : null, toggle ? /*#__PURE__*/_jsx(View, {
+        style: {
+          alignItems: 'flex-start'
+        },
+        children: toggle
+      }) : null]
+    })]
+  });
+}
+//# sourceMappingURL=Sidebar.js.map

package/lib/module/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","Animated","Easing","Pressable","View","useTheme","BaconLogo","Icon","IconButton","Text","ScrollArea","jsx","_jsx","jsxs","_jsxs","ITEM_HEIGHT","ITEM_GAP","PADDING","TOGGLE_SIZE","SidebarButton","item","active","collapsed","onPress","theme","hovered","setHovered","disabled","backgroundColor","colors","action","secondary","background","muted","contentColor","secondaryForeground","text","iconColor","iconName","activeIcon","icon","initial","label","trim","charAt","toUpperCase","leadingBox","width","height","flexShrink","alignItems","justifyContent","leading","style","children","name","size","color","variant","weight","undefined","onHoverIn","onHoverOut","accessibilityRole","accessibilityState","selected","accessibilityLabel","flexDirection","gap","paddingHorizontal","borderRadius","radii","pill","borderWidth","borderColor","border","default","opacity","numberOfLines","ellipsizeMode","minWidth","Sidebar","items","activeKey","defaultActiveKey","onChange","collapsedProp","defaultCollapsed","onCollapsedChange","showToggle","logo","footer","expandedWidth","collapsedWidth","scrollbarColor","activeControlled","activeInternal","setActiveInternal","collapseControlled","collapsedInternal","setCollapsedInternal","Value","current","visualCollapsed","setVisualCollapsed","anim","timing","toValue","duration","easing","out","ease","useNativeDriver","start","finished","stop","arrowRot","arrowRotate","interpolate","inputRange","outputRange","toggleTranslateX","Math","max","extrapolate","selectItem","key","toggleCollapsed","next","logoNode","toggle","transform","translateX","rotate","paddingTop","paddingBottom","overflow","minHeight","flex","marginTop","indicatorColor","strong","contentContainerStyle","map","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Sidebar/Sidebar.stories.js

@@ -0,0 +1,225 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import { Sidebar } from "./Sidebar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  title: 'Components/Sidebar',
+  component: Sidebar
+};
+export default meta;
+const ITEMS = [{
+  key: 'home',
+  label: 'Home',
+  icon: 'home'
+}, {
+  key: 'tables',
+  label: 'Table Map',
+  icon: 'table'
+}, {
+  key: 'menu',
+  label: 'Menu List',
+  icon: 'dish'
+}, {
+  key: 'orders',
+  label: 'Orders',
+  icon: 'receipt'
+}, {
+  key: 'users',
+  label: 'User Mgmt.',
+  icon: 'usergroup'
+}, {
+  key: 'customers',
+  label: 'Customers',
+  icon: 'user-star'
+}, {
+  key: 'reports',
+  label: 'Reports',
+  icon: 'analytics'
+}, {
+  key: 'settings',
+  label: 'Settings',
+  icon: 'settings'
+}];
+
+// A tall frame so the drawer fills a page-like height.
+function Frame({
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      height: 720,
+      flexDirection: 'row'
+    },
+    children: children
+  });
+}
+
+/** Expanded (Figma default), with footer text. */
+export const Expanded = {
+  render: () => {
+    const [active, setActive] = useState('home');
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Collapsed (icon-only rail). */
+export const Collapsed = {
+  render: () => {
+    const [active, setActive] = useState('home');
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        defaultCollapsed: true,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Toggle it — press the arrow to expand/collapse. */
+export const Toggleable = {
+  render: () => {
+    const [active, setActive] = useState('orders');
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** No footer (default) and few items. */
+export const Minimal = {
+  render: () => {
+    const [active, setActive] = useState('home');
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS.slice(0, 3),
+        activeKey: active,
+        onChange: setActive,
+        showToggle: false
+      })
+    });
+  }
+};
+
+/** Many items — the list scrolls, the footer stays pinned. */
+export const Scrolling = {
+  render: () => {
+    const many = Array.from({
+      length: 14
+    }).map((_, i) => ({
+      key: String(i),
+      label: `Section ${i + 1}`,
+      icon: 'analytics'
+    }));
+    const [active, setActive] = useState('0');
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        height: 480,
+        flexDirection: 'row'
+      },
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: many,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Long labels truncate with an ellipsis (single line). */
+export const LongLabels = {
+  render: () => {
+    const [active, setActive] = useState('a');
+    const items = [{
+      key: 'a',
+      label: 'Reservations & waitlist management',
+      icon: 'table'
+    }, {
+      key: 'b',
+      label: 'Kitchen display system settings',
+      icon: 'settings'
+    }, {
+      key: 'c',
+      label: 'Customer loyalty & rewards program',
+      icon: 'user-star'
+    }];
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: items,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/**
+ * Items without an icon: expanded keeps the icon's blank space (labels stay
+ * aligned); collapsed shows the label's initial.
+ */
+export const NoIcon = {
+  render: () => {
+    const [active, setActive] = useState('home');
+    const items = [{
+      key: 'home',
+      label: 'Home',
+      icon: 'home'
+    }, {
+      key: 'reports',
+      label: 'Reports'
+    },
+    // no icon → blank space / initial "R"
+    {
+      key: 'billing',
+      label: 'Billing'
+    },
+    // no icon → "B"
+    {
+      key: 'settings',
+      label: 'Settings',
+      icon: 'settings'
+    }];
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: items,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Bacon POS v2.0.12"
+      })
+    });
+  }
+};
+
+/** Custom logo color. */
+export const CustomLogo = {
+  render: () => {
+    const [active, setActive] = useState('home');
+    return /*#__PURE__*/_jsx(Frame, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        activeKey: active,
+        onChange: setActive,
+        footer: "Acme v1"
+      })
+    });
+  }
+};
+//# sourceMappingURL=Sidebar.stories.js.map

package/lib/module/components/Sidebar/Sidebar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","Sidebar","jsx","_jsx","meta","title","component","ITEMS","key","label","icon","Frame","children","style","height","flexDirection","Expanded","render","active","setActive","items","activeKey","onChange","footer","Collapsed","defaultCollapsed","Toggleable","Minimal","slice","showToggle","Scrolling","many","Array","from","length","map","_","i","String","LongLabels","NoIcon","CustomLogo"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+import { useState } from 'react';
+import { render, fireEvent, screen } from '@testing-library/react-native';
+import { ThemeProvider } from "../../theme/index.js";
+import { Sidebar } from "./Sidebar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function wrap(ui) {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    children: ui
+  }));
+}
+const ITEMS = [{
+  key: 'home',
+  label: 'Home',
+  icon: 'home'
+}, {
+  key: 'orders',
+  label: 'Orders',
+  icon: 'receipt'
+}, {
+  key: 'settings',
+  label: 'Settings',
+  icon: 'settings'
+}];
+describe('Sidebar', () => {
+  it('renders all item labels when expanded', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: ITEMS
+    }));
+    expect(screen.getByText('Home')).toBeTruthy();
+    expect(screen.getByText('Orders')).toBeTruthy();
+    expect(screen.getByText('Settings')).toBeTruthy();
+  });
+  it('shows the footer only when provided', () => {
+    const {
+      rerender
+    } = wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: ITEMS
+    }));
+    expect(screen.queryByText('v1.0')).toBeNull();
+    rerender(/*#__PURE__*/_jsx(ThemeProvider, {
+      children: /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        footer: "v1.0"
+      })
+    }));
+    expect(screen.getByText('v1.0')).toBeTruthy();
+  });
+  it('fires onChange with the pressed item key', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: ITEMS,
+      onChange: onChange
+    }));
+    fireEvent.press(screen.getByText('Orders'));
+    expect(onChange).toHaveBeenCalledWith('orders');
+  });
+  it('marks the active item as selected', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: ITEMS,
+      activeKey: "orders"
+    }));
+    expect(screen.getByLabelText('Orders').props.accessibilityState).toMatchObject({
+      selected: true
+    });
+    expect(screen.getByLabelText('Home').props.accessibilityState).toMatchObject({
+      selected: false
+    });
+  });
+  it('hides labels and footer when collapsed', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: ITEMS,
+      defaultCollapsed: true,
+      footer: "v1.0"
+    }));
+    expect(screen.queryByText('Home')).toBeNull();
+    expect(screen.queryByText('v1.0')).toBeNull();
+  });
+  it('truncates a long label to a single line', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: [{
+        key: 'a',
+        label: 'A very long navigation label',
+        icon: 'home'
+      }]
+    }));
+    expect(screen.getByText('A very long navigation label').props.numberOfLines).toBe(1);
+  });
+  it('shows the label initial for an icon-less item when collapsed', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: [{
+        key: 'r',
+        label: 'Reports'
+      }],
+      defaultCollapsed: true
+    }));
+    expect(screen.getByText('R')).toBeTruthy();
+  });
+  it('renders an icon-less item normally when expanded (label shown, no initial)', () => {
+    wrap(/*#__PURE__*/_jsx(Sidebar, {
+      items: [{
+        key: 'r',
+        label: 'Reports'
+      }]
+    }));
+    expect(screen.getByText('Reports')).toBeTruthy();
+    expect(screen.queryByText('R')).toBeNull();
+  });
+  it('toggles collapse via the built-in control', () => {
+    function Ctrl() {
+      const [c, setC] = useState(false);
+      return /*#__PURE__*/_jsx(Sidebar, {
+        items: ITEMS,
+        collapsed: c,
+        onCollapsedChange: setC
+      });
+    }
+    wrap(/*#__PURE__*/_jsx(Ctrl, {}));
+    // The control flips its intent immediately (the visual collapse trails the
+    // width animation, so we assert on the toggle rather than label unmount).
+    expect(screen.getByLabelText('Collapse sidebar')).toBeTruthy();
+    fireEvent.press(screen.getByLabelText('Collapse sidebar'));
+    expect(screen.getByLabelText('Expand sidebar')).toBeTruthy();
+    fireEvent.press(screen.getByLabelText('Expand sidebar'));
+    expect(screen.getByLabelText('Collapse sidebar')).toBeTruthy();
+    // Labels are still present while expanded.
+    expect(screen.getByText('Home')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=Sidebar.test.js.map

package/lib/module/components/Sidebar/Sidebar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","render","fireEvent","screen","ThemeProvider","Sidebar","jsx","_jsx","wrap","ui","children","ITEMS","key","label","icon","describe","it","items","expect","getByText","toBeTruthy","rerender","queryByText","toBeNull","footer","onChange","jest","fn","press","toHaveBeenCalledWith","activeKey","getByLabelText","props","accessibilityState","toMatchObject","selected","defaultCollapsed","numberOfLines","toBe","Ctrl","c","setC","collapsed","onCollapsedChange"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/Sidebar.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Sidebar/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Sidebar } from "./Sidebar.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Sidebar"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,cAAW","ignoreList":[]}