@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/lib/module/components/Input/TextField/Textfield.js

@@ -0,0 +1,311 @@
+"use strict";
+
+/// <reference types="nativewind/types" />
+// @ts-nocheck
+import * as React from 'react';
+import * as Slot from '@rn-primitives/slot';
+import { cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { View, TextInput } from 'react-native';
+import LottieView from 'lottie-react-native';
+import { SquircleView } from 'react-native-figma-squircle';
+import { cn } from "../../../lib/utils.js";
+import { TextClassContext, Text } from "../Text/Text.js";
+import { Lotties } from "../../../assets/lotties/index.js";
+import { useThemeColors } from "../../../lib/theme.js";
+
+// NativeWind interop (className -> style)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(TextInput, {
+  className: 'style'
+});
+cssInterop(Slot.View, {
+  className: 'style'
+});
+
+// Internal components with loose typing to allow className passing
+const StyledView = View;
+const StyledTextInput = TextInput;
+
+/* -----------------------------------------------------------------------------
+ * Variants
+ * -------------------------------------------------------------------------- */
+
+const CORNER_RADIUS = 8;
+const CORNER_SMOOTHING = 1;
+function useStateSquircleParams(state) {
+  const colors = useThemeColors();
+  const map = {
+    default: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.border,
+      strokeWidth: 1
+    },
+    focused: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.brandPrimary,
+      strokeWidth: 1
+    },
+    success: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.success,
+      strokeWidth: 1
+    },
+    error: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.destructive,
+      strokeWidth: 1
+    },
+    disabled: {
+      fillColor: colors.surfaceSubtle,
+      strokeColor: colors.border,
+      strokeWidth: 1
+    },
+    loading: {
+      fillColor: colors.surfaceDefault,
+      strokeColor: colors.border,
+      strokeWidth: 1
+    }
+  };
+  return map[state] ?? map.default;
+}
+const textFieldVariants = cva('flex-row items-center justify-between self-stretch bg-transparent min-h-[54px] px-3', {
+  variants: {
+    state: {
+      default: '',
+      focused: '',
+      success: '',
+      error: '',
+      disabled: 'opacity-60',
+      loading: ''
+    }
+  },
+  defaultVariants: {
+    state: 'default'
+  }
+});
+const fieldTextVariants = cva('text-xs font-medium', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-highlight-success-green',
+      error: 'text-highlight-alert-red',
+      disabled: 'text-text-muted',
+      loading: 'text-text-secondary'
+    }
+  },
+  defaultVariants: {
+    state: 'default'
+  }
+});
+const nativeTextFieldVariants = cva('flex-1 text-sm font-medium', {
+  variants: {
+    state: {
+      default: 'text-text-primary',
+      focused: 'text-text-primary',
+      success: 'text-text-primary',
+      error: 'text-text-primary',
+      disabled: 'text-text-muted',
+      loading: 'text-text-secondary'
+    },
+    content: {
+      placeholder: 'placeholder:text-text-muted',
+      filled: ''
+    }
+  },
+  defaultVariants: {
+    state: 'default',
+    content: 'placeholder'
+  }
+});
+const iconVariants = cva('', {
+  variants: {
+    state: {
+      default: 'text-text-muted',
+      focused: 'text-text-primary',
+      success: 'text-highlight-success-green',
+      error: 'text-highlight-alert-red',
+      disabled: 'text-text-muted',
+      loading: 'text-text-primary'
+    }
+  },
+  defaultVariants: {
+    state: 'default'
+  }
+});
+
+/* -----------------------------------------------------------------------------
+ * Props
+ * -------------------------------------------------------------------------- */
+
+/* -----------------------------------------------------------------------------
+ * Component
+ * -------------------------------------------------------------------------- */
+
+const TextField = /*#__PURE__*/React.forwardRef(({
+  asChild = false,
+  state = 'default',
+  content = 'placeholder',
+  type = 'text',
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  showLabel = false,
+  showHelpText = false,
+  showLeftIcon = false,
+  showRightIcon = false,
+  label,
+  helpText,
+  successMessage,
+  errorMessage,
+  inputProps,
+  ...containerProps
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  const isDisabled = state === 'disabled';
+  const squircleParams = useStateSquircleParams(state ?? 'default');
+  const valueLike = inputProps?.value ?? (typeof inputProps?.defaultValue === 'string' ? inputProps.defaultValue : '');
+  const isFilled = content === 'filled' || typeof valueLike === 'string' && valueLike.trim().length > 0;
+  const resolvedContent = isFilled ? 'filled' : 'placeholder';
+  const message = state === 'error' ? errorMessage || 'This field has an error' : state === 'success' ? successMessage || 'This field is valid' : state === 'loading' ? 'Loading...' : helpText || 'Helper text';
+  const getPlaceholder = () => {
+    if (resolvedContent !== 'placeholder') {
+      return inputProps?.placeholder;
+    }
+    switch (type) {
+      case 'search':
+        return 'Search for a Keyword';
+      case 'ai':
+        return 'Ask AI';
+      case 'composer':
+        return 'Type here';
+      case 'code':
+        return 'Paste your code here';
+      case 'text':
+      default:
+        return inputProps?.placeholder ?? 'Placeholder text';
+    }
+  };
+
+  // Handle code type (OTP-style boxes)
+  if (type === 'code') {
+    const codeLength = 6;
+    const codeValue = inputProps?.value || '';
+    const codeBoxes = Array.from({
+      length: codeLength
+    }).map((_, i) => codeValue[i] || '');
+    return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+      value: fieldTextVariants({
+        state
+      }),
+      children: /*#__PURE__*/_jsxs(StyledView, {
+        className: "gap-2",
+        children: [showLabel && /*#__PURE__*/_jsx(StyledView, {
+          children: /*#__PURE__*/_jsx(Text, {
+            children: label || 'Label'
+          })
+        }), /*#__PURE__*/_jsx(StyledView, {
+          className: "flex-row gap-2 justify-between",
+          children: codeBoxes.map((char, index) => /*#__PURE__*/_jsx(StyledView, {
+            className: cn('flex-1 items-center justify-center border rounded-md px-3 py-4', index === codeValue.length ? 'border-brand-primary ring-1 ring-brand-primary' : state === 'error' ? 'border-highlight-alert-red' : 'border-border-default', 'bg-surface-default'),
+            children: /*#__PURE__*/_jsx(Text, {
+              className: cn('text-sm font-medium', state === 'error' ? 'text-highlight-alert-red' : 'text-text-primary'),
+              children: char || 'X'
+            })
+          }, index))
+        }), /*#__PURE__*/_jsx(StyledTextInput, {
+          ...inputProps,
+          maxLength: codeLength,
+          editable: !isDisabled,
+          style: {
+            position: 'absolute',
+            opacity: 0,
+            width: 0,
+            height: 0
+          }
+        }), showHelpText && /*#__PURE__*/_jsx(StyledView, {
+          children: /*#__PURE__*/_jsx(Text, {
+            children: message
+          })
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: fieldTextVariants({
+      state
+    }),
+    children: /*#__PURE__*/_jsxs(StyledView, {
+      className: "gap-1",
+      children: [showLabel && /*#__PURE__*/_jsx(StyledView, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: label || 'Label'
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          overflow: 'hidden',
+          borderRadius: CORNER_RADIUS
+        },
+        children: /*#__PURE__*/_jsx(SquircleView, {
+          squircleParams: {
+            cornerRadius: CORNER_RADIUS,
+            cornerSmoothing: CORNER_SMOOTHING,
+            ...squircleParams
+          },
+          children: /*#__PURE__*/_jsxs(Component, {
+            ref: ref,
+            ...containerProps,
+            className: cn(textFieldVariants({
+              state
+            })),
+            children: [showLeftIcon && LeftIcon && /*#__PURE__*/_jsx(LeftIcon, {
+              size: 16,
+              className: cn('mr-2 mt-1', iconVariants({
+                state
+              }))
+            }), /*#__PURE__*/_jsx(StyledTextInput, {
+              ...inputProps,
+              multiline: true,
+              editable: !isDisabled,
+              placeholder: getPlaceholder(),
+              className: cn(nativeTextFieldVariants({
+                state,
+                content: resolvedContent
+              }), isDisabled && 'opacity-100'),
+              style: [{
+                textAlignVertical: 'top'
+              }, inputProps?.style]
+            }), state === 'loading' ? /*#__PURE__*/_jsx(LottieView, {
+              source: Lotties.loading,
+              autoPlay: true,
+              loop: true,
+              style: {
+                width: 48,
+                height: 48,
+                marginLeft: 8
+              }
+            }) : showRightIcon && RightIcon ? typeof RightIcon === 'function' ? /*#__PURE__*/_jsx(RightIcon, {
+              size: 16,
+              className: cn('ml-2 mt-1', iconVariants({
+                state
+              }))
+            }) : /*#__PURE__*/_jsx(StyledView, {
+              className: cn('ml-2 mt-1'),
+              children: RightIcon
+            }) : null]
+          })
+        })
+      }), showHelpText && /*#__PURE__*/_jsx(StyledView, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: message
+        })
+      })]
+    })
+  });
+});
+TextField.displayName = 'TextField';
+export { TextField, textFieldVariants, fieldTextVariants as textFieldTextVariants, nativeTextFieldVariants, iconVariants };
+//# sourceMappingURL=Textfield.js.map

package/lib/module/components/Input/TextField/Textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Slot","cva","cssInterop","View","TextInput","LottieView","SquircleView","cn","TextClassContext","Text","Lotties","useThemeColors","jsx","_jsx","jsxs","_jsxs","className","StyledView","StyledTextInput","CORNER_RADIUS","CORNER_SMOOTHING","useStateSquircleParams","state","colors","map","default","fillColor","surfaceDefault","strokeColor","border","strokeWidth","focused","brandPrimary","success","error","destructive","disabled","surfaceSubtle","loading","textFieldVariants","variants","defaultVariants","fieldTextVariants","nativeTextFieldVariants","content","placeholder","filled","iconVariants","TextField","forwardRef","asChild","type","leftIcon","LeftIcon","rightIcon","RightIcon","showLabel","showHelpText","showLeftIcon","showRightIcon","label","helpText","successMessage","errorMessage","inputProps","containerProps","ref","Component","isDisabled","squircleParams","valueLike","value","defaultValue","isFilled","trim","length","resolvedContent","message","getPlaceholder","codeLength","codeValue","codeBoxes","Array","from","_","i","Provider","children","char","index","maxLength","editable","style","position","opacity","width","height","overflow","borderRadius","cornerRadius","cornerSmoothing","size","multiline","textAlignVertical","source","autoPlay","loop","marginLeft","displayName","textFieldTextVariants"],"sourceRoot":"../../../../../src","sources":["components/Input/TextField/Textfield.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Input/Toggle/Toggle.figma.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { ToggleItem } from "./Toggle.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=408-2632';
+figma.connect(ToggleItem, FIGMA_URL, {
+  props: {
+    // State (whether toggle is on/off)
+    state: figma.boolean('state'),
+    // Tone (color variant)
+    tone: figma.enum('tone', {
+      default: 'default',
+      success: 'success',
+      destructive: 'destructive',
+      warning: 'warning'
+    }),
+    // Text content
+    text: figma.string('Text'),
+    // Icon visibility
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon')
+  },
+  example: props => /*#__PURE__*/_jsx(ToggleItem, {
+    state: props.state,
+    tone: props.tone,
+    text: props.text,
+    showLeftIcon: props.showLeftIcon,
+    showRightIcon: props.showRightIcon
+  })
+});
+//# sourceMappingURL=Toggle.figma.js.map

package/lib/module/components/Input/Toggle/Toggle.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","ToggleItem","jsx","_jsx","FIGMA_URL","connect","props","state","boolean","tone","enum","default","success","destructive","warning","text","string","showLeftIcon","showRightIcon","example"],"sourceRoot":"../../../../../src","sources":["components/Input/Toggle/Toggle.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,MAAMC,SAAS,GACb,qGAAqG;AAEvGJ,KAAK,CAACK,OAAO,CAACJ,UAAU,EAAEG,SAAS,EAAE;EACnCE,KAAK,EAAE;IACL;IACAC,KAAK,EAAEP,KAAK,CAACQ,OAAO,CAAC,OAAO,CAAC;IAE7B;IACAC,IAAI,EAAET,KAAK,CAACU,IAAI,CAAC,MAAM,EAAE;MACvBC,OAAO,EAAE,SAAS;MAClBC,OAAO,EAAE,SAAS;MAClBC,WAAW,EAAE,aAAa;MAC1BC,OAAO,EAAE;IACX,CAAC,CAAC;IAEF;IACAC,IAAI,EAAEf,KAAK,CAACgB,MAAM,CAAC,MAAM,CAAC;IAE1B;IACAC,YAAY,EAAEjB,KAAK,CAACQ,OAAO,CAAC,eAAe,CAAC;IAC5CU,aAAa,EAAElB,KAAK,CAACQ,OAAO,CAAC,gBAAgB;EAC/C,CAAC;EAEDW,OAAO,EAAGb,KAAK,iBACbH,IAAA,CAACF,UAAU;IACTM,KAAK,EAAED,KAAK,CAACC,KAAM;IACnBE,IAAI,EAAEH,KAAK,CAACG,IAAK;IACjBM,IAAI,EAAET,KAAK,CAACS,IAAK;IACjBE,YAAY,EAAEX,KAAK,CAACW,YAAa;IACjCC,aAAa,EAAEZ,KAAK,CAACY;EAAc,CACpC;AAEL,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Input/Toggle/Toggle.js

@@ -0,0 +1,140 @@
+"use strict";
+
+// @ts-nocheck
+import React from 'react';
+import { View, Text } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { cn } from "../../../lib/utils.js";
+
+// NativeWind interop
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Text, {
+  className: 'style'
+});
+
+// Typed components
+const StyledView = View;
+const StyledText = Text;
+
+/* ------------------------------------------------------------------
+ * Variants
+ * ------------------------------------------------------------------ */
+
+const toggleItemVariants = cva('flex-row items-center justify-center gap-2 px-4 py-3 rounded-md border', {
+  variants: {
+    tone: {
+      default: 'border-text-primary bg-surface-default',
+      success: 'border-text-primary bg-surface-default',
+      destructive: 'border-text-primary bg-surface-default',
+      warning: 'border-text-primary bg-surface-default'
+    },
+    state: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [
+  // DEFAULT (ON)
+  {
+    tone: 'default',
+    state: true,
+    className: 'bg-surface-subtle border-text-primary'
+  },
+  // SUCCESS (ON)
+  {
+    tone: 'success',
+    state: true,
+    className: 'bg-highlight-success-green-muted border-highlight-success-green'
+  },
+  // DESTRUCTIVE (ON)
+  {
+    tone: 'destructive',
+    state: true,
+    className: 'bg-highlight-alert-red-muted border-highlight-alert-red'
+  },
+  // WARNING (ON)
+  {
+    tone: 'warning',
+    state: true,
+    className: 'bg-highlight-warning-orange-muted border-highlight-warning-orange'
+  }],
+  defaultVariants: {
+    tone: 'default',
+    state: false
+  }
+});
+const textVariants = cva('text-sm font-semibold', {
+  variants: {
+    tone: {
+      default: 'text-text-secondary',
+      success: 'text-text-secondary',
+      destructive: 'text-text-secondary',
+      warning: 'text-text-secondary'
+    },
+    state: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [
+  // Default (ON) uses brand primary
+  {
+    tone: 'default',
+    state: true,
+    className: 'text-brand-primary'
+  },
+  // Success (ON)
+  {
+    tone: 'success',
+    state: true,
+    className: 'text-highlight-success-green'
+  },
+  // Destructive (ON)
+  {
+    tone: 'destructive',
+    state: true,
+    className: 'text-highlight-alert-red'
+  },
+  // Warning (ON)
+  {
+    tone: 'warning',
+    state: true,
+    className: 'text-highlight-warning-orange'
+  }]
+});
+
+/* ------------------------------------------------------------------
+ * Component
+ * ------------------------------------------------------------------ */
+
+export function ToggleItem({
+  text = 'Toggle',
+  tone = 'default',
+  state = false,
+  showLeftIcon = false,
+  showRightIcon = false,
+  className
+}) {
+  return /*#__PURE__*/_jsxs(StyledView, {
+    className: cn(toggleItemVariants({
+      tone,
+      state
+    }), className),
+    children: [showLeftIcon && /*#__PURE__*/_jsx(StyledView, {
+      className: "h-4 w-4 bg-muted rounded-sm"
+    }), /*#__PURE__*/_jsx(StyledText, {
+      className: textVariants({
+        tone,
+        state
+      }),
+      children: text
+    }), showRightIcon && /*#__PURE__*/_jsx(StyledView, {
+      className: "h-4 w-4 bg-muted rounded-sm"
+    })]
+  });
+}
+//# sourceMappingURL=Toggle.js.map

package/lib/module/components/Input/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","cssInterop","cva","cn","jsx","_jsx","jsxs","_jsxs","className","StyledView","StyledText","toggleItemVariants","variants","tone","default","success","destructive","warning","state","true","false","compoundVariants","defaultVariants","textVariants","ToggleItem","text","showLeftIcon","showRightIcon","children"],"sourceRoot":"../../../../../src","sources":["components/Input/Toggle/Toggle.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Input/ToggleGroup/Toggle-Group.figma.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { ToggleGroup, ToggleGroupItem } from "./Toggle-Group.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=97-224';
+
+/**
+ * ToggleGroup – Segmented control for single or multiple selection
+ *
+ * Use cases:
+ * - View switchers (list / grid)
+ * - Filters (multiple selection)
+ * - Mode toggles (single selection)
+ *
+ * Notes:
+ * - Selection state is controlled via `value`
+ * - Figma variants expose ONLY structural props
+ */
+figma.connect(ToggleGroup, FIGMA_URL, {
+  props: {
+    type: figma.enum('type', {
+      single: 'single',
+      multiple: 'multiple'
+    }),
+    orientation: figma.enum('orientation', {
+      horizontal: 'horizontal',
+      vertical: 'vertical'
+    })
+  },
+  example: ({
+    type,
+    orientation
+  }) => {
+    const value = type === 'single' ? 'one' : ['one', 'two'];
+    return /*#__PURE__*/_jsxs(ToggleGroup, {
+      type: type,
+      orientation: orientation,
+      value: value,
+      onValueChange: () => {},
+      children: [/*#__PURE__*/_jsx(ToggleGroupItem, {
+        value: "one",
+        children: "Toggle"
+      }), /*#__PURE__*/_jsx(ToggleGroupItem, {
+        value: "two",
+        children: "Toggle"
+      }), /*#__PURE__*/_jsx(ToggleGroupItem, {
+        value: "three",
+        children: "Toggle"
+      })]
+    });
+  }
+});
+//# sourceMappingURL=Toggle-Group.figma.js.map

package/lib/module/components/Input/ToggleGroup/Toggle-Group.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","ToggleGroup","ToggleGroupItem","jsx","_jsx","jsxs","_jsxs","FIGMA_URL","connect","props","type","enum","single","multiple","orientation","horizontal","vertical","example","value","onValueChange","children"],"sourceRoot":"../../../../../src","sources":["components/Input/ToggleGroup/Toggle-Group.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,EAAEC,eAAe,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9D,MAAMC,SAAS,GACb,mGAAmG;;AAErG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAP,KAAK,CAACQ,OAAO,CAACP,WAAW,EAAEM,SAAS,EAAE;EACpCE,KAAK,EAAE;IACLC,IAAI,EAAEV,KAAK,CAACW,IAAI,CAAC,MAAM,EAAE;MACvBC,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;IACZ,CAAC,CAAC;IAEFC,WAAW,EAAEd,KAAK,CAACW,IAAI,CAAC,aAAa,EAAE;MACrCI,UAAU,EAAE,YAAY;MACxBC,QAAQ,EAAE;IACZ,CAAC;EACH,CAAC;EAEDC,OAAO,EAAEA,CAAC;IAAEP,IAAI;IAAEI;EAAY,CAAC,KAAK;IAClC,MAAMI,KAAK,GAAGR,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC;IAExD,oBACEJ,KAAA,CAACL,WAAW;MACVS,IAAI,EAAEA,IAAK;MACXI,WAAW,EAAEA,WAAY;MACzBI,KAAK,EAAEA,KAAM;MACbC,aAAa,EAAEA,CAAA,KAAM,CAAC,CAAE;MAAAC,QAAA,gBAExBhB,IAAA,CAACF,eAAe;QAACgB,KAAK,EAAC,KAAK;QAAAE,QAAA,EAAC;MAAM,CAAiB,CAAC,eACrDhB,IAAA,CAACF,eAAe;QAACgB,KAAK,EAAC,KAAK;QAAAE,QAAA,EAAC;MAAM,CAAiB,CAAC,eACrDhB,IAAA,CAACF,eAAe;QAACgB,KAAK,EAAC,OAAO;QAAAE,QAAA,EAAC;MAAM,CAAiB,CAAC;IAAA,CAC5C,CAAC;EAElB;AACF,CAAC,CAAC","ignoreList":[]}