related-ui-components 1.1.6

package/lib/module/components/Filters/README.md

@@ -0,0 +1,212 @@
+# Filters Component
+
+A flexible, customizable bottom sheet filter component for React Native applications with support for sorting options, points range selection, brand filtering, and extensive styling options.
+
+![Filters Example](../../assets/components/Filters.png)
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Filters } from '@your-org/component-library';
+
+const ExampleScreen = () => {
+  const sortOptions = [
+    { id: 1, name: 'Price: Low to High', value: 'price_asc' },
+    { id: 2, name: 'Price: High to Low', value: 'price_desc' },
+  ];
+  
+  const brands = [
+    { id: '1', name: 'Brand A', logo: require('../assets/brandA.png') },
+    { id: '2', name: 'Brand B', logo: require('../assets/brandB.png') },
+  ];
+  
+  const handleFilterApply = (result) => {
+    console.log('Applied filters:', result);
+  };
+  
+  return (
+    <View style={{ flex: 1 }}>
+      <Filters 
+        sortOptions={sortOptions}
+        brands={brands}
+        onActionButtonPress={handleFilterApply}
+      />
+    </View>
+  );
+};
+
+export default ExampleScreen;
+```
+
+## Props
+
+The `Filters` component provides extensive customization options through its props.
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onActionButtonPress` | `(result: FilterResult) => void` | ❌ | - | Function called when Apply Filter button is pressed |
+| `sortOptions` | `SortOption[]` | ❌ | `[]` | Array of sorting options to display |
+| `brands` | `Brand[]` | ❌ | `[]` | Array of brand options to display |
+| `isRTL` | `boolean` | ❌ | `I18nManager.isRTL` | Whether to display in right-to-left mode |
+
+### Layout & Sections Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `sortSectionTitle` | `string` | ❌ | `"Sort"` | Title for the sorting section |
+| `pointsRangeSectionTitle` | `string` | ❌ | `"Points range"` | Title for the points range section |
+| `brandSectionTitle` | `string` | ❌ | `"Brands"` | Title for the brands section |
+| `showPointsRange` | `boolean` | ❌ | `true` | Whether to display the points range section |
+| `headerTitleText` | `string` | ❌ | `"Filter"` | Text for the header title |
+| `headerResetText` | `string` | ❌ | `"Reset All"` | Text for the reset button |
+| `applyButtonText` | `string` | ❌ | `"Apply Filter"` | Text for the apply button |
+
+### Points Range Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `rangeMinLimit` | `number` | ❌ | `0` | Minimum possible value for the range selector |
+| `rangeMaxLimit` | `number` | ❌ | `1000` | Maximum possible value for the range selector |
+| `rangeInitialMin` | `number` | ❌ | `0` | Initial minimum selected value |
+| `rangeInitialMax` | `number` | ❌ | `1000` | Initial maximum selected value |
+
+### Points Range Styling Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `pointsRangeContainerStyle` | `ViewStyle` | ❌ | - | Style for the main points range container |
+| `pointsRangeInputsContainerStyle` | `ViewStyle` | ❌ | - | Style for the inputs container in points range selector |
+| `pointsRangeCustomInputContainerStyle` | `ViewStyle` | ❌ | - | Style for the custom input containers |
+| `pointsRangeCustomInputFieldStyle` | `ViewStyle` | ❌ | - | Style for the input fields |
+| `pointsRangeSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the slider container |
+| `pointsRangeMultiSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the multi-slider container |
+| `pointsRangeTrackStyle` | `ViewStyle` | ❌ | - | Style for the slider track |
+| `pointsRangeSelectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the selected portion of the track |
+| `pointsRangeUnselectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the unselected portions of the track |
+| `pointsRangeMarkerStyle` | `ViewStyle` | ❌ | - | Style for slider markers |
+| `pointsRangeMarkerEnabledStyle` | `ViewStyle` | ❌ | - | Style for enabled slider markers |
+| `pointsRangeMarkerDisabledStyle` | `ViewStyle` | ❌ | - | Style for disabled slider markers |
+| `pointsRangeMarkerDotStyle` | `ViewStyle` | ❌ | - | Style for the marker dots |
+| `pointsRangeInputProps` | `Object` | ❌ | - | Additional props to pass to the range input fields |
+| `pointsRangeMultiSliderProps` | `Object` | ❌ | - | Additional props to pass to the MultiSlider component |
+
+### Brand Configuration Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `brandActiveIcon` | `React.ReactNode` | ❌ | `<Ionicons name="checkmark-outline" />` | Icon to show for selected brands |
+| `brandActiveIconStyle` | `ViewStyle` | ❌ | - | Style for the active brand icon |
+
+### Bottom Sheet Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `bottomSheetIndex` | `number` | ❌ | `0` | Initial index for the bottom sheet |
+| `snapPoints` | `string[]` | ❌ | `["50%", "90%"]` | Snap points for the bottom sheet |
+| `handleIndicatorStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet handle indicator |
+
+### Style Customization Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `ViewStyle` | ❌ | - | Style for the main container |
+| `headerStyle` | `ViewStyle` | ❌ | - | Style for the header |
+| `titleStyle` | `TextStyle` | ❌ | - | Style for the header title |
+| `resetTextStyle` | `TextStyle` | ❌ | - | Style for the reset text |
+| `sectionStyle` | `ViewStyle` | ❌ | - | Style for all filter sections |
+| `sortSectionStyle` | `ViewStyle` | ❌ | - | Style specifically for the sort section |
+| `sectionTitleStyle` | `TextStyle` | ❌ | - | Style for section titles |
+| `optionRowStyle` | `ViewStyle` | ❌ | - | Style for option rows in the sort section |
+| `optionTextStyle` | `TextStyle` | ❌ | - | Style for option text in the sort section |
+| `checkboxColor` | `string` | ❌ | `theme.secondary` | Color for checkboxes |
+| `brandContainerStyle` | `ViewStyle` | ❌ | - | Style for the brands grid container |
+| `applyButtonStyle` | `ViewStyle` | ❌ | - | Style for the apply button |
+| `applyButtonTextStyle` | `TextStyle` | ❌ | - | Style for the apply button text |
+| `bottomSheetStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet |
+
+## Types
+
+```typescript
+type SortOption = {
+  name: string;
+  value: string;
+  id: number;
+};
+
+type Brand = {
+  id: string;
+  name: string;
+  logo: ImageRequireSource;
+};
+
+type FilterResult = {
+  sort: SortOption[];
+  pointsRange: { min: number; max: number };
+  selectedBrands: Brand[];
+};
+```
+
+## Examples
+
+### Basic Filter with Sort Options Only
+
+```jsx
+<Filters 
+  sortOptions={[
+    { id: 1, name: 'Newest First', value: 'newest' },
+    { id: 2, name: 'Oldest First', value: 'oldest' },
+    { id: 3, name: 'Highest Rated', value: 'rated_desc' }
+  ]}
+  showPointsRange={false}
+  onActionButtonPress={(result) => handleSort(result.sort)}
+/>
+```
+
+### Points Range Filter with Custom Limits
+
+```jsx
+<Filters 
+  showPointsRange={true}
+  rangeMinLimit={0}
+  rangeMaxLimit={5000}
+  rangeInitialMin={100}
+  rangeInitialMax={2000}
+  pointsRangeSectionTitle="Price Range"
+  onActionButtonPress={(result) => handlePriceRange(result.pointsRange)}
+/>
+```
+
+### Brand Selection with Custom Styling
+
+```jsx
+<Filters 
+  brands={[
+    { id: 'nike', name: 'Nike', logo: require('../assets/nike.png') },
+    { id: 'adidas', name: 'Adidas', logo: require('../assets/adidas.png') },
+    { id: 'puma', name: 'Puma', logo: require('../assets/puma.png') }
+  ]}
+  brandSectionTitle="Select Brands"
+  brandContainerStyle={{ justifyContent: 'space-between' }}
+  brandActiveIconStyle={{ backgroundColor: '#E0F7FA' }}
+  onActionButtonPress={(result) => handleBrandFilter(result.selectedBrands)}
+/>
+```
+
+### RTL Support with Custom Headers
+
+```jsx
+<Filters 
+  isRTL={true}
+  headerTitleText="فلتر"
+  headerResetText="إعادة تعيين الكل"
+  applyButtonText="تطبيق الفلتر"
+  sortSectionTitle="ترتيب"
+  pointsRangeSectionTitle="نطاق النقاط"
+  brandSectionTitle="العلامات التجارية"
+  onActionButtonPress={handleArabicFilters}
+/>
+```

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

@@ -0,0 +1,7 @@
+"use strict";
+
+export { default } from "./Filters.js";
+export { default as PointsRangeSelector } from "./PointsRangeSelector.js";
+export * from "./Filters.js";
+export * from "./PointsRangeSelector.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","PointsRangeSelector"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Filters/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,cAAW;AACnC,SAASA,OAAO,IAAIC,mBAAmB,QAAO,0BAAuB;AACrE,cAAc,cAAW;AACzB,cAAc,0BAAuB","ignoreList":[]}

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

@@ -0,0 +1,150 @@
+"use strict";
+
+import React, { forwardRef, useState } from 'react';
+import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CustomInput = /*#__PURE__*/forwardRef(({
+  label,
+  error,
+  helper,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  containerStyle,
+  labelStyle,
+  inputStyle,
+  inputContainerStyle,
+  errorStyle,
+  helperStyle,
+  onChangeText,
+  onBlur,
+  onFocus,
+  isRTL = false,
+  ...rest
+}, ref) => {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus && onFocus();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur && onBlur();
+  };
+
+  // Define styles using a function to access theme
+  const styles = createStyles(theme);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [label && /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, labelStyle],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.inputContainer, inputContainerStyle, isFocused && styles.focusedInput, error && styles.errorInput, isRTL && {
+        flexDirection: 'row-reverse'
+      }],
+      children: [leftIcon && /*#__PURE__*/_jsx(View, {
+        style: [styles.leftIcon, isRTL && {
+          paddingRight: 12,
+          paddingLeft: 0
+        }],
+        children: leftIcon
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: ref,
+        style: [styles.input, leftIcon ? styles.inputWithLeftIcon : undefined, rightIcon ? styles.inputWithRightIcon : undefined, {
+          textAlign: isRTL ? 'right' : 'left'
+        }, inputStyle],
+        onChangeText: onChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholderTextColor: theme.placeholderText // Use placeholderText
+        ,
+        ...rest
+      }), rightIcon && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.rightIcon, isRTL && {
+          paddingLeft: 12,
+          paddingRight: 0
+        }],
+        onPress: onRightIconPress,
+        disabled: !onRightIconPress,
+        children: rightIcon
+      })]
+    }), error ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.error, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, errorStyle],
+      children: error
+    }) : helper ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.helper, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, helperStyle],
+      children: helper
+    }) : null]
+  });
+});
+
+// Function to create themed styles
+const createStyles = theme => StyleSheet.create({
+  container: {},
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 6,
+    color: theme.labelText // Use labelText
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: theme.border,
+    // Use border
+    borderRadius: 8,
+    backgroundColor: theme.inputBackground,
+    // Use inputBackground
+    alignItems: 'center',
+    minHeight: 48
+  },
+  focusedInput: {
+    borderColor: theme.primary // Use primary for focus indication
+  },
+  errorInput: {
+    borderColor: theme.error // Correctly uses error
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    color: theme.inputText,
+    // Use inputText
+    backgroundColor: 'transparent' // Keep transparent
+  },
+  inputWithLeftIcon: {
+    paddingLeft: 8
+  },
+  inputWithRightIcon: {
+    paddingRight: 8
+  },
+  leftIcon: {
+    paddingLeft: 12
+  },
+  rightIcon: {
+    paddingRight: 12
+  },
+  error: {
+    fontSize: 12,
+    color: theme.error,
+    // Correctly uses error
+    marginTop: 4
+  },
+  helper: {
+    fontSize: 12,
+    color: theme.helper,
+    // Correctly uses helper
+    marginTop: 4
+  }
+});
+export default CustomInput;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useState","TextInput","Text","View","StyleSheet","TouchableOpacity","useTheme","jsx","_jsx","jsxs","_jsxs","CustomInput","label","error","helper","leftIcon","rightIcon","onRightIconPress","containerStyle","labelStyle","inputStyle","inputContainerStyle","errorStyle","helperStyle","onChangeText","onBlur","onFocus","isRTL","rest","ref","theme","isFocused","setIsFocused","handleFocus","handleBlur","styles","createStyles","style","container","children","textAlign","inputContainer","focusedInput","errorInput","flexDirection","paddingRight","paddingLeft","input","inputWithLeftIcon","undefined","inputWithRightIcon","placeholderTextColor","placeholderText","onPress","disabled","create","fontSize","fontWeight","marginBottom","color","labelText","borderWidth","borderColor","border","borderRadius","backgroundColor","inputBackground","alignItems","minHeight","primary","flex","paddingHorizontal","inputText","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/Input.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Input/README.md

@@ -0,0 +1,128 @@
+# CustomInput Component
+
+A flexible, themeable text input component for React Native applications with support for labels, icons, error messages, and helper text.
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { CustomInput } from '@your-org/component-library';
+
+const MyForm = () => {
+  const [name, setName] = useState('');
+  
+  return (
+    <View style={{ padding: 16 }}>
+      <CustomInput
+        label="Full Name"
+        placeholder="Enter your full name"
+        value={name}
+        onChangeText={setName}
+      />
+    </View>
+  );
+};
+
+export default MyForm;
+```
+
+## Props
+
+The `CustomInput` component extends React Native's `TextInputProps` (except for the `style` prop which is replaced with more specific styling props) and adds the following:
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | ❌ | - | Text to display above the input field |
+| `error` | `string` | ❌ | - | Error message to display below the input (turns border red) |
+| `helper` | `string` | ❌ | - | Helper text to display below the input (hidden if error is present) |
+
+### Icon Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `leftIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the left side of the input |
+| `rightIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the right side of the input |
+| `onRightIconPress` | `() => void` | ❌ | - | Function to call when the right icon is pressed |
+
+### Style Customization
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the label text |
+| `inputStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text input itself |
+| `inputContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the input and icons |
+| `errorStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the error message text |
+| `helperStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the helper text |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onChangeText` | `(text: string) => void` | ❌ | - | Function to call when text changes |
+| `onBlur` | `() => void` | ❌ | - | Function to call when input loses focus |
+| `onFocus` | `() => void` | ❌ | - | Function to call when input gains focus |
+
+## Examples
+
+### Basic Input with Label
+
+```jsx
+<CustomInput
+  label="Username"
+  placeholder="Enter your username"
+  onChangeText={(text) => console.log(text)}
+/>
+```
+
+### Input with Error State
+
+```jsx
+<CustomInput
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChangeText={setEmail}
+  error={!isValidEmail(email) ? "Please enter a valid email address" : ""}
+/>
+```
+
+### Input with Helper Text
+
+```jsx
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry
+  helper="Password must be at least 8 characters long"
+  onChangeText={setPassword}
+/>
+```
+
+### Input with Icons
+
+```jsx
+import { Ionicons } from '@expo/vector-icons';
+
+// Password input with toggle icon
+const [showPassword, setShowPassword] = useState(false);
+
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry={!showPassword}
+  leftIcon={<Ionicons name="lock-closed" size={20} color="#888" />}
+  rightIcon={
+    <Ionicons 
+      name={showPassword ? "eye-off" : "eye"} 
+      size={20} 
+      color="#888" 
+    />
+  }
+  onRightIconPress={() => setShowPassword(!showPassword)}
+  onChangeText={setPassword}
+/>
+```

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as Input } from "./Input.js";
+export * from "./Input.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","Input"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,KAAK,QAAO,YAAS;AACzC,cAAc,YAAS","ignoreList":[]}

package/lib/module/components/LockOverlay/LockOverlay.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import React from 'react';
+import { Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LockOverlay = ({
+  visible = true,
+  containerStyle,
+  iconStyle,
+  textStyle,
+  text = 'Unlock',
+  iconSize = 50,
+  iconColor = 'white',
+  overlayOpacity = 0.7,
+  contentVerticalAlign = "center",
+  ...touchableProps
+}) => {
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [styles.overlay, {
+      backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
+    }, contentVerticalAlign == "top" && {
+      justifyContent: "flex-start",
+      paddingTop: 50
+    }, containerStyle],
+    activeOpacity: 0.8,
+    ...touchableProps,
+    children: [/*#__PURE__*/_jsx(Ionicons, {
+      name: "lock-closed",
+      size: iconSize,
+      color: iconColor
+      // style={iconStyle}
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: iconColor
+      }, textStyle],
+      children: text
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 12
+  }
+});
+export default LockOverlay;
+//# sourceMappingURL=LockOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","iconStyle","textStyle","text","iconSize","iconColor","overlayOpacity","contentVerticalAlign","touchableProps","style","styles","overlay","backgroundColor","justifyContent","paddingTop","activeOpacity","children","name","size","color","create","position","top","left","right","bottom","alignItems","zIndex","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/LockOverlay.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEEC,IAAI,EACJC,UAAU,EAGVC,gBAAgB,QAEX,cAAc;AAErB,SAASC,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAc9C,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,OAAO,GAAG,IAAI;EACdC,cAAc;EACdC,SAAS;EACTC,SAAS;EACTC,IAAI,GAAG,QAAQ;EACfC,QAAQ,GAAG,EAAE;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,GAAG;EACpBC,oBAAoB,GAAG,QAAQ;EAC/B,GAAGC;AACL,CAAC,KAAK;EACJ,IAAI,CAACT,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEF,KAAA,CAACL,gBAAgB;IACfiB,KAAK,EAAE,CACLC,MAAM,CAACC,OAAO,EACd;MAAEC,eAAe,EAAE,iBAAiBN,cAAc;IAAI,CAAC,EACvDC,oBAAoB,IAAI,KAAK,IAAI;MAACM,cAAc,EAAC,YAAY;MAAEC,UAAU,EAAE;IAAE,CAAC,EAC9Ed,cAAc,CACd;IACFe,aAAa,EAAE,GAAI;IAAA,GACfP,cAAc;IAAAQ,QAAA,gBAElBrB,IAAA,CAACF,QAAQ;MACPwB,IAAI,EAAC,aAAa;MAClBC,IAAI,EAAEd,QAAS;MACfe,KAAK,EAAEd;MACP;IAAA,CACD,CAAC,eACFV,IAAA,CAACL,IAAI;MAACmB,KAAK,EAAE,CAACC,MAAM,CAACP,IAAI,EAAE;QAAEgB,KAAK,EAAEd;MAAU,CAAC,EAAEH,SAAS,CAAE;MAAAc,QAAA,EACzDb;IAAI,CACD,CAAC;EAAA,CACS,CAAC;AAEvB,CAAC;AAED,MAAMO,MAAM,GAAGnB,UAAU,CAAC6B,MAAM,CAAC;EAC/BT,OAAO,EAAE;IACPU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTZ,cAAc,EAAE,QAAQ;IACxBa,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE;EACV,CAAC;EACDxB,IAAI,EAAE;IACJyB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAehC,WAAW","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as LockOverlay } from "./LockOverlay.js";
+export * from "./LockOverlay.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","LockOverlay"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,WAAW,QAAO,kBAAe;AACrD,cAAc,kBAAe","ignoreList":[]}