@archpublicwebsite/rangepicker 1.1.0 → 1.2.5

package/README.md

@@ -5,7 +5,7 @@ Custom, lightweight date range picker component for Vue 3 with Tailwind CSS pref
 ## Features
 
 - 🎨 **Vue 3 Composition API** - Built with modern Vue 3 and TypeScript
-- 📦 **No CSS Prefix** - Clean Tailwind classes without prefix for maximum compatibility
+- 📦 **CSS Prefix Support** - All Tailwind classes prefixed with `arch-` to prevent conflicts with Vuetify/Bootstrap
 - 📅 **Dayjs Integration** - Powerful date manipulation without moment.js bloat
 - 🎨 **Themeable** - Easy color customization via props (HEX colors)
 - 📱 **Mobile Responsive** - Touch-friendly with bottom sheet on mobile
@@ -38,10 +38,47 @@ const dates = ref('')
 </script>
 
 <template>
-  <RangepickerInput 
-    v-model="dates" 
+  <RangepickerInput
+    v-model="dates"
+    primary-color="#3b82f6"
+    placeholder="Check in / Check out"
+  />
+</template>
+```
+
+### TypeScript Support
+
+Full TypeScript support with exported types for type-safe development:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  RangepickerInput,
+  type RangepickerProps,
+  type DateRange
+} from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
+
+// Type-safe date range
+const dates = ref<DateRange>({ startDate: '', endDate: '' })
+
+// Type-safe props configuration
+const pickerOptions: Partial<RangepickerProps> = {
+  format: 'DD/MM/YYYY',
+  autoApply: true,
+  minDays: 2,
+  maxDays: 30,
+  showTooltip: true
+}
+</script>
+
+<template>
+  <RangepickerInput
+    v-model="dates"
+    v-bind="pickerOptions"
     primary-color="#3b82f6"
-    placeholder="Check in / Check out" 
+    placeholder="Check in / Check out"
   />
 </template>
 ```
@@ -52,8 +89,8 @@ const dates = ref('')
 - No Flash of Unstyled Content (FOUC)
 - Industry standard (like Vuetify, Element Plus, etc.)
 
-**Tailwind CSS Classes:**
-The component uses standard Tailwind CSS utilities without any prefix. All styling is encapsulated within the component's scoped CSS.
+**Tailwind CSS Prefix:**
+All Tailwind utility classes are prefixed with `arch-` to prevent conflicts with other CSS frameworks like Vuetify or Bootstrap. Your existing styles won't be affected!
 
 ## Color Customization
 
@@ -97,12 +134,58 @@ const dates3 = ref('')
 </template>
 ```
 
+### Font Customization
+
+Use custom fonts to match your brand typography:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { RangepickerInput } from '@archpublicwebsite/rangepicker'
+
+const dates1 = ref('')
+const dates2 = ref('')
+const dates3 = ref('')
+</script>
+
+<template>
+  <!-- Roboto font -->
+  <RangepickerInput
+    v-model="dates1"
+    font-family="'Roboto', sans-serif"
+    primary-color="#3b82f6"
+    placeholder="With Roboto"
+  />
+
+  <!-- Poppins font -->
+  <RangepickerInput
+    v-model="dates2"
+    font-family="'Poppins', sans-serif"
+    primary-color="#8b5cf6"
+    placeholder="With Poppins"
+  />
+
+  <!-- Inherit from parent (default) -->
+  <RangepickerInput
+    v-model="dates3"
+    placeholder="Inherits parent font"
+  />
+</template>
+
+<style>
+/* Import fonts if needed */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+</style>
+```
+
 ### Color Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `primary-color` | `string` | - | Main color for selected dates and buttons (HEX format, e.g., `#3b82f6`) |
 | `secondary-color` | `string` | - | Color for hover states and secondary elements (HEX format, optional) |
+| `font-family` | `string` | `inherit` | Custom font family (e.g., `'Roboto', sans-serif`, `'Poppins', sans-serif`) |
 
 **Features:**
 - ✅ **Scoped per instance** - Multiple pickers can have different colors simultaneously
@@ -110,19 +193,20 @@ const dates3 = ref('')
 - ✅ **HEX format** - Standard 3 or 6 digit HEX colors (e.g., `#3b82f6`, `#fff`)
 - ✅ **Auto-conversion** - Automatically converts HEX to RGB for CSS variables
 - ✅ **Optional** - Falls back to default theme if not provided
+- ✅ **Custom fonts** - Use any font family, inherits from parent by default
 
 ## Framework Compatibility
 
 This package is designed to work seamlessly with any Vue 3 framework:
 
-- ✅ **Vuetify** - Works alongside Vuetify components
-- ✅ **Bootstrap** - Compatible with Bootstrap utilities
+- ✅ **Vuetify** - No CSS conflicts thanks to `arch-` prefix
+- ✅ **Bootstrap** - Works alongside Bootstrap utilities
 - ✅ **Element Plus** - Fully compatible
 - ✅ **Quasar** - No issues
 - ✅ **Plain Vue 3** - Works great standalone
 - ✅ **Nuxt 3** - SSR compatible
 
-All styles are compiled and scoped to the component, ensuring no conflicts with other frameworks.
+The `arch-` prefix on all Tailwind classes ensures zero conflicts with other CSS frameworks.
 
 ## Usage
 
@@ -161,6 +245,21 @@ const options = {
 ### Basic Usage
 
 ```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Rangepicker, type DateRange } from '@archpublicwebsite/rangepicker'
+import '@archpublicwebsite/rangepicker/style.css'
+
+const triggerRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const dateRange = ref<DateRange>({ startDate: '', endDate: '' })
+
+const dateRangeText = computed(() => {
+  if (!dateRange.value.startDate || !dateRange.value.endDate) return ''
+  return `${dateRange.value.startDate} - ${dateRange.value.endDate}`
+})
+</script>
+
 <template>
   <div>
     <input
@@ -177,25 +276,10 @@ const options = {
       v-model:is-open="isOpen"
       :trigger-element="triggerRef"
       :value-of-months="2"
-      :format="'DD MMM YYYY'"
+      format="DD MMM YYYY"
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Rangepicker } from '@archpublicwebsite/rangepicker'
-import '@archpublicwebsite/rangepicker/style.css'
-
-const triggerRef = ref<HTMLElement | null>(null)
-const isOpen = ref(false)
-const dateRange = ref({ startDate: '', endDate: '' })
-
-const dateRangeText = computed(() => {
-  if (!dateRange.value.startDate || !dateRange.value.endDate) return ''
-  return `${dateRange.value.startDate} - ${dateRange.value.endDate}`
-})
-</script>
 ```
 
 ### Using the Composable
@@ -203,67 +287,43 @@ const dateRangeText = computed(() => {
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Rangepicker, useRangepicker } from '@archpublicwebsite/rangepicker'
+import {
+  Rangepicker,
+  useRangepicker,
+  type RangepickerProps
+} from '@archpublicwebsite/rangepicker'
 import '@archpublicwebsite/rangepicker/style.css'
 
 const triggerRef = ref<HTMLElement | null>(null)
-const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, {
+
+// Type-safe composable options
+const options: Partial<RangepickerProps> = {
   valueOfMonths: 2,
   format: 'DD MMM YYYY',
   minDays: 1,
-})
-</script>
-```
+  autoApply: true
+}
 
-### Hotel Booking Example
+const { isOpen, dateRange, open, close, toggle } = useRangepicker(triggerRef, options)
+</script>
 
-```vue
 <template>
   <div>
-    <input
-      ref="bookingInputRef"
-      type="text"
-      :value="bookingText"
-      placeholder="Check-in - Check-out"
-      readonly
-      @click="isBookingOpen = true"
-    />
+    <button ref="triggerRef" @click="toggle">
+      {{ dateRange.startDate && dateRange.endDate
+        ? `${dateRange.startDate} - ${dateRange.endDate}`
+        : 'Select dates' }}
+    </button>
 
     <Rangepicker
-      v-model="bookingDates"
-      v-model:is-open="isBookingOpen"
-      :trigger-element="bookingInputRef"
-      :value-of-months="2"
-      :value-of-columns="2"
-      :min-days="1"
-      :format="'DD MMM YYYY'"
-      :show-tooltip="true"
-      :holidays="holidays"
-      :min-date="today"
-      variant="desktop"
+      v-model="dateRange"
+      v-model:is-open="isOpen"
+      :trigger-element="triggerRef"
+      v-bind="options"
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Rangepicker } from '@archpublicwebsite/rangepicker'
-import '@archpublicwebsite/rangepicker/style.css'
-import dayjs from 'dayjs'
-
-const bookingInputRef = ref<HTMLElement | null>(null)
-const isBookingOpen = ref(false)
-const bookingDates = ref({ startDate: '', endDate: '' })
-const today = dayjs().format('YYYY-MM-DD')
-const holidays = ref(['2025-12-25', '2025-01-01'])
-
-const bookingText = computed(() => {
-  if (!bookingDates.value.startDate || !bookingDates.value.endDate) return ''
-  return `${bookingDates.value.startDate} - ${bookingDates.value.endDate}`
-})
-</script>
 ```
-
 ## Props
 
 | Prop | Type | Default | Description |
@@ -299,6 +359,128 @@ const bookingText = computed(() => {
 | `dateSelected` | `Dayjs` | Emitted when a date is clicked |
 | `rangeSelected` | `{ start: Dayjs, end: Dayjs }` | Emitted when range is complete |
 
+## TypeScript Support
+
+This package is built with TypeScript and provides full type definitions. All types are automatically exported for your convenience.
+
+### Available Types
+
+```typescript
+import type {
+  RangepickerProps,    // Component props interface
+  RangepickerEmits,    // Event emitter interface
+  DateRange,           // Date range object type
+  CalendarDay,         // Internal calendar day type
+  CalendarMonth        // Internal calendar month type
+} from '@archpublicwebsite/rangepicker'
+```
+
+### Type Definitions
+
+#### `RangepickerProps`
+Complete props interface with JSDoc documentation. All props are optional with sensible defaults:
+
+```typescript
+interface RangepickerProps {
+  modelValue?: { startDate?: string | Date | Dayjs; endDate?: string | Date | Dayjs }
+  isOpen?: boolean
+  variant?: 'desktop' | 'mobile'
+  minDate?: string | Date | Dayjs
+  maxDate?: string | Date | Dayjs
+  minDays?: number
+  maxDays?: number
+  close?: boolean
+  valueOfMonths?: number  // default: 2
+  valueOfColumns?: number // default: 2
+  disabledDates?: (string | Date)[]
+  holidays?: (string | Date)[]
+  format?: string         // default: 'YYYY-MM-DD'
+  delimiter?: string      // default: ' - '
+  placeholder?: string
+  label?: string
+  showTooltip?: boolean   // default: true
+  autoApply?: boolean     // default: false
+  position?: 'auto' | 'top' | 'bottom'
+  triggerElement?: HTMLElement | null
+  colorStyles?: Record<string, string>
+}
+```
+
+#### `DateRange`
+Type for the v-model binding:
+
+```typescript
+interface DateRange {
+  startDate: string
+  endDate: string
+}
+```
+
+#### `RangepickerEmits`
+Event emitter types for type-safe event handling:
+
+```typescript
+interface RangepickerEmits {
+  'update:modelValue': [value: { startDate: string; endDate: string }]
+  'update:isOpen': [value: boolean]
+  'dateSelected': [date: Dayjs]
+  'rangeSelected': [start: Dayjs, end: Dayjs]
+}
+```
+
+### Usage Examples
+
+#### Type-Safe Component Props
+
+```typescript
+import type { RangepickerProps } from '@archpublicwebsite/rangepicker'
+
+// Define props with autocomplete support
+const config: Partial<RangepickerProps> = {
+  format: 'DD/MM/YYYY',
+  minDays: 2,
+  maxDays: 30,
+  autoApply: true,
+  showTooltip: true
+}
+```
+
+#### Type-Safe Event Handlers
+
+```typescript
+import type { Dayjs } from 'dayjs'
+
+function handleDateSelected(date: Dayjs) {
+  console.log('Selected:', date.format('YYYY-MM-DD'))
+}
+
+function handleRangeSelected(start: Dayjs, end: Dayjs) {
+  const nights = end.diff(start, 'day')
+  console.log(`Booking: ${nights} nights`)
+}
+```
+
+#### Type-Safe Refs
+
+```typescript
+import { ref } from 'vue'
+import type { DateRange } from '@archpublicwebsite/rangepicker'
+
+const dateRange = ref<DateRange>({ startDate: '', endDate: '' })
+const holidays = ref<string[]>(['2025-12-25', '2025-01-01'])
+const disabledDates = ref<Date[]>([new Date('2025-12-24')])
+```
+
+### IDE Support
+
+With the exported types, you'll get:
+
+- ✅ **Autocomplete** - IntelliSense for all props and events
+- ✅ **Type Checking** - Compile-time error detection
+- ✅ **Documentation** - Hover tooltips with prop descriptions and default values
+- ✅ **Refactoring** - Safe rename and refactor operations
+- ✅ **Error Prevention** - Catch typos and incorrect prop usage before runtime
+
 ## Development
 
 ```bash
@@ -318,40 +500,15 @@ pnpm type-check
 pnpm preview
 ```
 
-## Package Structure
-
-```
-packages/rangepicker/
-├── dist/                  # Built files (published to npm)
-│   ├── rangepicker.js    # ES module (39.91 KB, gzipped: 9.42 KB)
-│   ├── rangepicker.umd.cjs  # UMD module (20.18 KB, gzipped: 7.07 KB)
-│   ├── style.css         # Compiled styles (16.25 KB)
-│   └── *.d.ts            # TypeScript type definitions
-├── src/
-│   ├── index.ts          # Main entry point
-│   ├── Rangepicker.vue   # Core calendar component
-│   ├── RangepickerInput.vue # Input wrapper component
-│   ├── types.ts          # Type definitions
-│   ├── utils/
-│   │   ├── calendar.ts   # Calendar generation logic
-│   │   ├── date.ts       # Dayjs utilities
-│   │   └── position.ts   # Smart positioning
-│   └── styles/
-│       └── rangepicker.scss  # Source styles (compiled during build)
-├── package.json
-├── vite.config.ts
-└── tailwind.config.js    # Tailwind config for package build
-```
-
 ## CSS Architecture
 
-The component uses **compiled Tailwind CSS** bundled in the package:
+The component uses **Tailwind CSS with `arch-` prefix** to prevent conflicts with other frameworks:
 
-### How it works
-- ✅ **Pre-compiled CSS** - All Tailwind utilities are built into `style.css`
-- ✅ **No conflicts** - Styles are scoped and don't interfere with your app
-- ✅ **Production-ready** - Minified and optimized (16KB gzipped)
-- ✅ **Just import and use** - No Tailwind config needed in your project
+### Why the prefix?
+- ✅ **Zero conflicts** with Vuetify, Bootstrap, Element Plus, etc.
+- ✅ **Safe to use** alongside any CSS framework
+- ✅ **All utilities prefixed**: `.arch-flex`, `.arch-text-sm`, `.arch-bg-white`, etc.
+- ✅ **Custom classes untouched**: `.rangepicker-*` classes remain unprefixed
 
 ### Styling Options
 
@@ -384,11 +541,11 @@ The component uses **compiled Tailwind CSS** bundled in the package:
 ### Styles not showing
 Make sure you imported the CSS:
 ```js
-import '@archpublicwebsite/rangepicker/dist/style.css'
+import '@archpublicwebsite/rangepicker/style.css'
 ```
 
-### Using with other frameworks
-The component's CSS is self-contained and should not conflict with Vuetify, Bootstrap, or other frameworks. All styles are scoped to `.rangepicker-*` classes.
+### CSS conflicts with Vuetify
+This should NOT happen thanks to the `arch-` prefix. If you see conflicts, please open an issue.
 
 ### TypeScript errors
 Ensure `vue` is installed as a dependency in your project.

package/dist/Rangepicker.vue.d.ts

@@ -1,31 +1,6 @@
 import { Dayjs } from 'dayjs';
-interface Props {
-    modelValue?: {
-        startDate?: string | Date | Dayjs;
-        endDate?: string | Date | Dayjs;
-    };
-    isOpen?: boolean;
-    variant?: 'desktop' | 'mobile';
-    minDate?: string | Date | Dayjs;
-    maxDate?: string | Date | Dayjs;
-    minDays?: number;
-    maxDays?: number;
-    close?: boolean;
-    valueOfMonths?: number;
-    valueOfColumns?: number;
-    disabledDates?: (string | Date)[];
-    holidays?: (string | Date)[];
-    format?: string;
-    delimiter?: string;
-    placeholder?: string;
-    label?: string;
-    showTooltip?: boolean;
-    autoApply?: boolean;
-    position?: 'auto' | 'top' | 'bottom';
-    triggerElement?: HTMLElement | null;
-    colorStyles?: Record<string, string>;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+import { RangepickerProps } from './types';
+declare const _default: import('vue').DefineComponent<RangepickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: {
         startDate: string;
         endDate: string;
@@ -33,7 +8,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "update:isOpen": (value: boolean) => any;
     dateSelected: (date: Dayjs) => any;
     rangeSelected: (start: Dayjs, end: Dayjs) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<RangepickerProps> & Readonly<{
     "onUpdate:modelValue"?: (value: {
         startDate: string;
         endDate: string;
@@ -42,8 +17,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onDateSelected?: (date: Dayjs) => any;
     onRangeSelected?: (start: Dayjs, end: Dayjs) => any;
 }>, {
-    isOpen: boolean;
     variant: "desktop" | "mobile";
+    borderRadius: string;
+    isOpen: boolean;
     valueOfMonths: number;
     valueOfColumns: number;
     format: string;

package/dist/Rangepicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA2iBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAiClC,UAAU,KAAK;IACb,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;KAChC,CAAA;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACpC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACrC;;;mBAvC2C,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;YAmBxD,OAAO;aACN,SAAS,GAAG,QAAQ;mBAMd,MAAM;oBACL,MAAM;YAGd,MAAM;eACH,MAAM;iBAGJ,OAAO;eACT,OAAO;cACR,MAAM,GAAG,KAAK,GAAG,QAAQ;;;;AAonBtC,wBAUG"}
+{"version":3,"file":"Rangepicker.vue.d.ts","sourceRoot":"","sources":["../src/Rangepicker.vue"],"names":[],"mappings":"AA4jBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;mBAgBjB,MAAM;iBAAW,MAAM;;;;;;;mBAAvB,MAAM;iBAAW,MAAM;;;;;;;;;;;;;;;;;;;AA+lBnE,wBAUG"}

package/dist/RangepickerConstraints.stories.d.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RangepickerInput from "./RangepickerInput.vue";
+/**
+ * Stories demonstrating date constraints and validation options
+ * for the Rangepicker component.
+ */
+declare const meta: Meta<typeof RangepickerInput>;
+export default meta;
+type Story = StoryObj<typeof RangepickerInput>;
+/**
+ * Set a minimum date to prevent selection of past dates.
+ */
+export declare const MinDate: Story;
+/**
+ * Set a maximum date to limit how far in the future users can select.
+ */
+export declare const MaxDate: Story;
+/**
+ * Combine minDate and maxDate to create a booking window.
+ */
+export declare const MinMaxDateRange: Story;
+/**
+ * Require a minimum number of days in the selected range.
+ */
+export declare const MinDays: Story;
+/**
+ * Limit the maximum number of days that can be selected.
+ */
+export declare const MaxDays: Story;
+/**
+ * Combine minDays and maxDays to enforce a stay duration range.
+ */
+export declare const MinMaxDays: Story;
+//# sourceMappingURL=RangepickerConstraints.stories.d.ts.map

package/dist/RangepickerConstraints.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangepickerConstraints.stories.d.ts","sourceRoot":"","sources":["../src/RangepickerConstraints.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuDvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAQ/C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAkCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAgC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAuCrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC"}